alexandrecoin
2/11/2018 - 3:41 PM

quete.html

quete.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Reward</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class="container">
                <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
                <p class="name">Gandalf</p>
                <p class="reward">reward <span class="amount">1000</span><br>golden coins</p>
        </div>
    </body>
</html>
style.css
content_copyfile_download
.container {
    display: inline-flex;
    float: left;
    width: auto;
    height: auto;
    max-width: 300px;
}

.container img {
    opacity: 0.65;
}

img{
    height: 300px;
    width: 270px;
}

.name {
    font-size: 45px;
    font-family: Arial, sans-serif;
    color:white;
    position: absolute;
    top: 130px;
    left: 60px;
}

.reward {
    font-size: 22px;
    font-family: Arial, sans-serif;
    color: #000000;
    position: absolute;
    top: 0px;
    left: 30px;
    background-color: RGBa(218,218,218, 0.8);
    padding: 5px 50px;
    border-radius: 10px;
}

.amount {
    color: orange;
}

.container:hover img {
    opacity: 1;
}

.container:hover .reward {
    display: none;
}

.container:hover .name {
    font-size: 30px;
    top: 230px;
    left: 85px;
}