Skip to content

Instantly share code, notes, and snippets.

@Jules59

Jules59/gist:b146ccc1a45fbb952a9e6f164915896f

Created February 24, 2018 12:46
Show Gist options
  • Save Jules59/b146ccc1a45fbb952a9e6f164915896f to your computer and use it in GitHub Desktop.
Save Jules59/b146ccc1a45fbb952a9e6f164915896f to your computer and use it in GitHub Desktop.
Download ZIP
magicien
Raw
gistfile1.txt
<!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" >
<img class="gandalf" src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf"/>
<p class="gandalf1">reward <span class="mille">1000</span><br>golden coins</p>
<p class="gandalf2">Gandalf</p>
</div>
</body>
</html>
Raw
gistfile2.txt
.gandalf
{
opacity: 0.7;
position: absolute;
}
.gandalf: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;
position: absolute;
margin-top: 300px;
margin-left: 100px;
}
.image:hover .gandalf1
{
visibility: hidden;
}
.image:hover .gandalf2
{
text-align: center;
font-size: 50px;
position: absolute;
margin-top: 500px;
margin-left: 10%;
}
.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