Skip to content

Instantly share code, notes, and snippets.

@Jules59
Created February 22, 2018 21:30
Show Gist options
  • Save Jules59/8bad2d935476f2cc8f923ea993b813c3 to your computer and use it in GitHub Desktop.
Save Jules59/8bad2d935476f2cc8f923ea993b813c3 to your computer and use it in GitHub Desktop.
magicien.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://fr.allfont.net/allfont.css?fonts=ringbearer-medium" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="lemagicien.css" />
<title>FindThePrecious.com</title>
</head>
<body>
<div class= "image" >
<p class="gandalf1">reward <span class="mille">1000</span><br>golden coins</p>
<p class="gandalf2">Gandalf</p>
<img class="gandalf" src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf"/>
</div>
</body>
</html>
.image
{
opacity: 0.4;
position: absolute;
}
.image:hover
{
opacity: 1;
}
.gandalf1
{
font-family: 'Ringbearer Medium', verdana;
background-color: white;
border-radius: 25px;
color: black;
font-size: 45px;
text-align: center;
width:450px;
opacity: 0.9;
position: absolute;
transform: translate(5%, 30%);
}
.gandalf2
{
font-family: 'Ringbearer Medium', verdana;
color: rgb(245,181,14);
font-size: 70px;
text-align: center;
margin-top: 300px;
margin-left: 100px;
position: absolute;
}
.image:hover .gandalf1
{
visibility: hidden;
}
.image:hover .gandalf2
{
text-align: center;
font-size: 50px;
margin-top: 500px;
margin-left: 35%;
}
.mille
{
color: rgb(245,181,14);
font-size: 45px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment