dragonslayer77 · March 24, 2019 15:15
diff --git a/vanishing-gandalf.css b/vanishing-gandalf.css
 .container {
 	display: flex;
 	flex-direction:row;
 }

 .block, .image {
 	height: 340px;
 	width: 300px;
 }

 .text {
 	padding: 20px;
 	background-color: rgba(255,255,255,0.5);
 	position: relative;
 	top: -377px;
 	height: 340px;
 	width: 260px;
 }

 .text p  {
 	font-size: 2em;
 	background-color: white;
 	border-radius: 15px;
 	text-align: center;
 	padding: 15px;
 }

 em {
 	color: orange;
 	font-style: normal;
 }

 h2 {
 	color: white;
 	font-size: 3em;
 	text-align: center;
 }

 .block:hover .text{
 	visibility: hidden;
 }

 .block:hover h2{
 	visibility: visible;
 	font-size: 2em;
 	position: relative;
 	top: 100px;
 }
diff --git a/vanishing-gandalf.html b/vanishing-gandalf.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>FindThePrecious.com</title>
        <link rel="stylesheet" type="text/css" href="vanishing-gandalf.css">
  </head>
  <body>
 	<div id="container">
 		<article class="block">
 			<img class="image" src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf" title="The Wizard"/>
 			<div class="text">
 				<p>reward <em>1000</em> golden coins</p>
 				<h2>Gandalf</h2>
 			</div>
      </body>
    </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>FindThePrecious.com</title>
	<link rel="stylesheet" type="text/css" href="vanishing-gandalf.css">
	</head>
	<body>
	<div id="container">
	<article class="block">
	<img class="image" src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf" title="The Wizard"/>
	<div class="text">
	<p>reward <em>1000</em> golden coins</p>
	<h2>Gandalf</h2>
	</div>
	</body>
	</html>