Skip to content

Instantly share code, notes, and snippets.

@mtouja

mtouja/wanted_2.html

Last active August 15, 2018 12: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 mtouja/632fbac931e34b3099c45c72d2e658d3 to your computer and use it in GitHub Desktop.
Save mtouja/632fbac931e34b3099c45c72d2e658d3 to your computer and use it in GitHub Desktop.
Download ZIP
Sandbox wcs - Gandalf
Raw
wanted_2.html
<!DOCTYPE html>
</html>
<title>Wanted</title>
<link rel="stylesheet" type="text/css" href="wanted_style_2.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="contain">
<div id="rewards">
<p>
reward <span class="keyword">1000</span></br>
golden coins
</p>
</div>
<div id="wanted_name">
<p>Gandalf</p>
</div>
</div>
</body>
Raw
wanted_style_2.css
body {
font-family: Roboto, arial;
}
#contain {
position:relative;
margin: 0;
height: 515px;
width: 450px;
background-image: url('http://images.innoveduc.fr/integration_gandalf.png');
opacity: 0.7;
}
#rewards {
position: absolute;
width: 90%;
height: auto;
border-radius: 12px;
margin-top: 1rem;
margin-left:20px;
text-align: center;
background: #ffffff;
opacity: 0.9;
color: #000;
}
#rewards p {
font-size: 45px;
margin: 25px;
}
span.keyword {
color: #ff8c00;
}
#wanted_name {
position: absolute;
bottom: 42%;
left: 22%;
}
#wanted_name p {
margin:0;
font-size: 60px;
color: #fff;
}
/************** au survol de la souris **************/
#contain:hover {
opacity: 1;
}
#contain:hover #rewards{
display: none;
}
#contain:hover #wanted_name{
bottom:25px;
margin-left:50px;
}
#contain:hover #wanted_name p{
font-size: 45px;
}
@RemyLabecot
Copy link

C'est tout bien !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment