Skip to content

Instantly share code, notes, and snippets.

@patmachris

patmachris/gandalf2.css

Last active January 24, 2019 10:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patmachris/61a1b646074d525b4b5501ee35c2c85c to your computer and use it in GitHub Desktop.
Save patmachris/61a1b646074d525b4b5501ee35c2c85c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gandalf2.css
.orange{
color:orange;
}
#gandalf img{
opacity:0.5;
}
#gandalf img:hover{
opacity:1;
}
#gandalf img:hover ~ #nom{
top:460px;
left:200px;
font-size:200%;
}
#gandalf img:hover ~ #reward{
display:none;
}
#reward{
font-family:'sans-serif';
font-size: 3em;
position:absolute;
opacity: 0.8;
top:30px;
left:30px;
width:460px;
height:140px;
padding-top: 10px;
background-color: lightgrey;
border-radius: 10px;
text-align: center;
z-index:1;
display:block;
}
#gold{
font-family:'sans-serif';
margin-top: 10px;
}
#nom{
font-family:'sans-serif';
position:absolute;
top:250px;
left:100px;
z-index:1;
font-size:400%;
color:white;
}
Raw
gandalf2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gandalf</title>
<link rel="stylesheet" href="gandalf2.css" />
</head>
<body>
<div id="gandalf">
<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf"/>
<div id="reward">
<span>reward </span>
<span class="orange">1000</span>
<p id="gold">golden coins</p>
</div>
<div id="nom">
<p>Gandalf</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment