Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FindThePrecious</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div id="container">
<div id="perso">
<div id="bloc_img">
<div id="img1" class="img1bis">
<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf" />
<div id="text1" class="text1_bis">
<h4>reward <span>1000</span></h4>
<h4>golden coins</h4>
</div>
<div id="text2" class="text2_bis">
<span>Gandalf</span>
</div>
<div id="text3" class="text3_bis">
<span>Gandalf</span>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
body{
font-family:'Open Sans', sans-serif;
}
#perso img{
width: 300px;
height:300px;
}
#img1{
width:300px;
height:300px;
margin-bottom:100px;
}
#img1 img{
opacity: 0.5;
margin-top:20px;
}
#text1 h4{
text-align: center;
font-size: 20px;
line-height: 20px;
}
#text1{
opacity: 0.8;
position: relative;
bottom: 320px;
left: 25px;
height: 80px;
width: 250px;
background-color: white;
border-radius: 10px;
}
#text1 h4 span{
color: orange;
}
#text2 span{
text-align: center;
font-size: 40px;
position: absolute;
bottom: 60px;
left: 70px;
color: white;
font-weight: bold;
}
#text3 span{
text-align:center;
font-size:20px;
color: white;
position: absolute;
bottom: 25px;
left:105px;
font-weight:bold;
}
#bloc_img{
position:relative;
}
.text3_bis{
display:none;
}
#img1:hover .text3_bis{
display:block;
}
#img1 img:hover{
opacity:1;
}
.text1_bis{
display: block;
}
#img1:hover .text1_bis{
display:none;
}
.text2_bis{
display: block;
}
#img1:hover .text2_bis{
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.