maylisdoucet/Gandalf.html

## Gandalf.html
<html>

  <head>
     <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Gandalf</title>
        </meta>
  </head>

  <body>
        <div class="ensemble">
          <div class="reward"><p>reward<span> 1000</span> golden coins</p></div>
          <img src="http://images.innoveduc.fr/integration_gandalf.png">
          <div class="surname">Gandalf</div>
        </div>
  </body>

</html>

## style.css

span
{
  color: #FF8C00;
  font-weight: bold;
}

.ensemble
{
 position: absolute;
 width: 640px;
 height: 800px;
 margin: 0;
 padding: 0;
}

.ensemble img
{
 width: 100%;
 position: absolute;

 transition: .6s ease;
 opacity: .5;
 z-index:1;
}

.reward
{
  font-family: 'Trebuchet MS';
  width:580px;
  height:200px;
  position: absolute;
  left: 32px;
  top: 32px;
  right: 32px;
  padding: 0;
  border-radius: 22px;
  background-color:rgba(192,192,192,0.5);
  transition: .4s ease;
  z-index:2;

}

.reward p
{
  font-size: 4em;
  margin: 10px 52px 22px 52px;
  color: black;
}

.surname
{
  font-family: 'Trebuchet MS';
  font-size: 7em;
  left: 40px;
  right: 40px;
  color: white;
  margin: 50% 0 ;
  text-align: center;
  transition: .5s ease;
  position: absolute;
  z-index:2;
}

.ensemble:hover .surname
{
  margin: 95% 0 ;
  font-size: 3em;
  opacity: 1;
}

.ensemble:hover .reward
{
  opacity: 0;
}

.ensemble:hover img
{
  opacity: 1;
}
	<html>

	<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css" />
	<title>Gandalf</title>
	</meta>
	</head>

	<body>
	<div class="ensemble">
	<div class="reward"><p>reward<span> 1000</span> golden coins</p></div>
	<img src="http://images.innoveduc.fr/integration_gandalf.png">
	<div class="surname">Gandalf</div>
	</div>
	</body>

	</html>

	span
	{
	color: #FF8C00;
	font-weight: bold;
	}

	.ensemble
	{
	position: absolute;
	width: 640px;
	height: 800px;
	margin: 0;
	padding: 0;
	}

	.ensemble img
	{
	width: 100%;
	position: absolute;

	transition: .6s ease;
	opacity: .5;
	z-index:1;
	}

	.reward
	{
	font-family: 'Trebuchet MS';
	width:580px;
	height:200px;
	position: absolute;
	left: 32px;
	top: 32px;
	right: 32px;
	padding: 0;
	border-radius: 22px;
	background-color:rgba(192,192,192,0.5);
	transition: .4s ease;
	z-index:2;

	}

	.reward p
	{
	font-size: 4em;
	margin: 10px 52px 22px 52px;
	color: black;
	}

	.surname
	{
	font-family: 'Trebuchet MS';
	font-size: 7em;
	left: 40px;
	right: 40px;
	color: white;
	margin: 50% 0 ;
	text-align: center;
	transition: .5s ease;
	position: absolute;
	z-index:2;
	}

	.ensemble:hover .surname
	{
	margin: 95% 0 ;
	font-size: 3em;
	opacity: 1;
	}

	.ensemble:hover .reward
	{
	opacity: 0;
	}

	.ensemble:hover img
	{
	opacity: 1;
	}