lebowvsky/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css" media="all" />
  <title>Document</title>
</head>
<body>
  <div class="container">
    <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
    <p>reward <span>1000</span> golden coins</p>
    <h2>Gandalf</h2>
  </div>
</body>
</html>

## style.css
body {
    background-color: rgb(54, 54, 54);
}


.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

img {
    position: relative;
    z-index: -1;
    opacity: 0.5;
}

p {
    position: absolute;
    top: 3%;
    left: 10%;
    width: 80%;
    margin: 0;
    z-index: 1000;
    font-size: 4em;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
    border-radius: 10px;
    transition: opacity 250ms ease-in-out;
}

span {
    color: orange;
}

h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4em;
    color: white;
    transition: all 250ms ease-in-out;
}

.container:hover img {
    opacity: 1;
}

.container:hover p {
    opacity: 0;
}

.container:hover h2 {
    top: 95%;
    transform: translate(-50%, -100%);
    margin: 0;
    font-size: 2em;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
	<title>Document</title>
	</head>
	<body>
	<div class="container">
	<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
	<p>reward <span>1000</span> golden coins</p>
	<h2>Gandalf</h2>
	</div>
	</body>
	</html>
	body {
	background-color: rgb(54, 54, 54);
	}


	.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	}

	img {
	position: relative;
	z-index: -1;
	opacity: 0.5;
	}

	p {
	position: absolute;
	top: 3%;
	left: 10%;
	width: 80%;
	margin: 0;
	z-index: 1000;
	font-size: 4em;
	background-color: rgba(255, 255, 255, 0.5);
	text-align: center;
	border-radius: 10px;
	transition: opacity 250ms ease-in-out;
	}

	span {
	color: orange;
	}

	h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 4em;
	color: white;
	transition: all 250ms ease-in-out;
	}

	.container:hover img {
	opacity: 1;
	}

	.container:hover p {
	opacity: 0;
	}

	.container:hover h2 {
	top: 95%;
	transform: translate(-50%, -100%);
	margin: 0;
	font-size: 2em;
	}