dragonslayer77/vanishing-gandalf.css

## 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;
}

## 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>
	.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;
	}
	<!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>