Skip to content

Instantly share code, notes, and snippets.

@saraclima

saraclima/cssquete.html

Last active October 4, 2017 12:03
Show Gist options
  • Save saraclima/5ad3c7d4deac12a37bcab09a7563a351 to your computer and use it in GitHub Desktop.
Save saraclima/5ad3c7d4deac12a37bcab09a7563a351 to your computer and use it in GitHub Desktop.
Download ZIP
CssQuete
Raw
cssquete.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FindThePrecious</title>
<link rel="stylesheet" type="text/css" href="stylecssgandalf.css">
</head>
<body>
<div class="content">
<figure>
<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="The Wizard" />
<fig-caption>Gandalf</fig-caption>
</figure>
<div class="description" >
<p>Reward <mark>1000 </mark> <br />golden coins </p>
</div>
</div>
</body>
</html>
Raw
stylecssgandalf.css
div.content {
position: relative;
width: 500px;
}
img {
opacity: 0.5;
}
div.description {
position:absolute;
bottom:350px;
left:150px;
padding: 10px;
border-radius: 15px;
/* styling bellow */
background-color:white;
opacity:0.7;
filter:alpha(opacity=60);
}
p {
font-size: 30px;
}
fig-caption {
position: absolute;
bottom:60px;
left:150px;
color:white;
font-size: 45px;
}
img:hover {
opacity: inherit;
}
.content:hover .description {
display: none;
}
.content:hover fig-caption {
position: absolute;
bottom:30px;
left:150px;
color:white;
font-size: 30px;
}
mark {
color: orange;
background-color: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment