cyberhafid
3/1/2019 - 11:52 PM

gandalf

gandalf

fichier.css
content_copyfile_download
body {
width:70%; 
margin:0 auto;
}

.image {
  position:absolute;
  z-index:1;
}
.image .vitre {
  opacity: 0.7;
 }
.image:hover .vitre { opacity:1;}

.image span {
	visibility: hidden;
}
.image img:hover + span {
  visibility: visible;
  color: rgb(255, 253, 253);
  position:absolute;
  top:480px; 
  width:600px;
  height:400px;
  z-index:2;
  font-size:180%;
}

.image p {
  visibility: visible;
  color: rgb(255, 253, 253);
  position:absolute;
    font-size:300%;
}
.image img:hover + p {
  visibility: hidden;
}

.texte{
  color: rgb(255, 253, 253);
  position:absolute;
  top:340px; 
  width:100%;
  z-index:2;
  font-size:500%;
}
.image:hover .texte { display:none; }

.arrondi {
  position:absolute;
  top:30px; 
  width:90%;
  height:20%;
  margin: 5%; 
  background: #eeeeee;
  border: 1px solid #a39e9e80;
 -webkit-border-radius: 10px;
 z-index:3;
font-size:250%;
opacity: 0.7;
  }

  .image:hover .arrondi { display:none; }
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="fr">


<!-- Afin de valider ton code HTML, clic sur la petite flèche en haut à droite de cette fenêtre. Pour rappel, tu peux jeter un oeil par ici pour en savoir un peu plus: https://blog.codepen.io/2017/10/11/analyze-css-now-using-stylelint/ -->

<head>
        <meta charset="UTF-8">
        <title> Structurer une page HTML</title>
        <link rel="stylesheet" href="fichier.css">

</head>

<body>
                <div class="image">
                        <div class="vitre">
                                <img src="https://image.noelshack.com/fichiers/2019/09/6/1551550560-gandalf.png" alt="" />
                                <span>
                                        <center>Gandalf</center>
                                </span>


                                <div class="texte">
                                        <center><b>Gandalf</b></center>
                                </div>




                                <div class="arrondi">

                                        <center><b>Reward </b><b style="color:#FF0000";>1000</b></center>
                                        <center><b>Border coins</b></center>
                                </div>

                        </div>

                </div>

</body>

</html>