JulieGcql
9/4/2018 - 2:43 PM

Gandalf

Gandalf

style.css
content_copyfile_download
h1{
	font-weight: bolder;
	font-size: 50pt;
	text-align: center;
}

.wanted{
	width: 1000px;
	height: 300px;
	display: inline-flex;
}

.reward{
  display: block;
	height: auto;
  margin-left: auto;
  margin-right: auto;
	text-align: center;
}

img{
	width: 300px;
	height: auto;
	filter: opacity(50%);
}

.reward:hover img{
	filter: opacity(100%);
}

.description{
	background-color: rgba(233, 233, 233, 0.8);
  border-radius: 8px;
  font-weight: bold;
  color: white;
  font-size: 20pt;
  width: 250px; 
  z-index : 2;
  position: absolute;
  margin-left: 25px;
  
  
}

.reward:hover .description{
	display: none;
}

.gandalf{
	width: 300px;
	position: absolute;
	margin-top: -150px;
	font-size: 30pt;
	color: white;
}

.reward:hover .gandalf{
	margin-top: -40px;
	font-size: 20pt;
}

span{
	color: orange;
}
gandalf.html
content_copyfile_download
<!DOCTYPE html>
<html  lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Wanted</title>
</head>
<body>
	<header>
		<h1>Wanted</h1>
	</header>

	<div class="wanted">
		<div class="reward">
			<p class="description">Reward <span>1000</span> golden coins</p>
			<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
			<h2 class="gandalf">Gandalf</h2>
		</div>

		<div class="reward">
			<p class="description">Reward <span>1000</span> golden coins</p>
			<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
			<h2 class="gandalf">Gandalf</h2>
		</div>

		<div class="reward">
			<p class="description">Reward <span>1000</span> golden coins</p>
			<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
			<h2 class="gandalf">Gandalf</h2>
			
		</div>
		
	</div>

</body>
</html>