Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@hedigit

hedigit/Gandalf

Last active February 22, 2018 11:21
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 hedigit/1c5850140c8266e4d9a2fd5740b5e921 to your computer and use it in GitHub Desktop.
Save hedigit/1c5850140c8266e4d9a2fd5740b5e921 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Gandalf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="design.css" />
<title>FindThePrecious.com</title>
</head>
<body>
<div class= "image" >
<p class="gandalff">
reward <span class="mille">1000</span> golden coins
</p>
<div class="gandalfff">
Gandalf
</div>
<img class="gandalf" src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf"/>
</div>
</body>
</html>
Raw
Gandalf2
.image:hover{
font-size: 20px;
text-align: center;
position: absolute;
width: 25%;
display: block;
transition: .10s ease;
transition: .3s ease-in-out;
opacity: 1;
}
.image {
opacity: 0.9;
position: absolute;
}
.gandalff {
font-family: "verdana";
color: black;
font-size: 45px;
opacity: 0.8;
top: 1%;
left: 50%;
position: absolute;
transform: translate(-50%, 50%);
text-align: center;
width:300px;
background-color: white;
border-radius: 25px;
}
.image:hover .gandalff{
visibility: hidden;
}
.gandalfff {
font-family: "verdana";
color: white;
font-size: 70px;
position: absolute;
text-align: center;
margin-top: 300px;
margin-left: 100px;
}
.image:hover .gandalfff{
justify-content: center;
margin-top: 500px;
margin-left: 150px;
font-size: 50px;
}
.mille {
font-family: "verdana";
color: orange;
font-size: 45px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment