Pop-in image ouverture

Code CSS

/*----- Img ouverture blog -----*/ #ouverture4 { position: fixed; top: 0px; left: 0px; text-align: center; background-color: rgba(0, 0, 0, 0.63);/*Coul-transp. du fond*/ width: 100%; /*Largeur du fond*/ height: 900px;/*Hauteur du fond*/ z-index:100;/*priorité:100*/ } #ouverture4 img { width:700px;/*Largeur img*/ height:350px;/*Hauteur img*/ margin: 22% auto; border:solid 6px rgba(255, 255, 255, 0.81); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; z-index:101; box-shadow: black 6px 6px 10px;/*Ombre*/ } #ouverture4 span img{ width:30px; height:30px; font-size: 20px;/*Hauteur-X*/ border:solid 0px grey;/*Bordure grise*/ color: #ff0000; box-shadow: none; margin-top:21%; margin-left:-25px; z-index: 105; } #ouverture4 span img:hover{ width:35px; height:35px; } /*---------------------------------*/

Code HTML

<div id="ouverture4"> <img style="vertical-align: top; " src="http://ekladata.com/papyrocktest.eklablog.com/ theme/images/background.jpg?70535383" alt="pour cacher" /> <span style="color: #ff0000; font-size: large;"> <a onclick="document.getElementById('ouverture4').style.display='none';" href="#"> <span style="color: #ff0000;"> <img title="Cliquez ici pour fermer. " src="http://ekladata.com/4adxrl1N86Lozgp369q4wsuvKd8/fermer-img.png" alt="icone fermeture" /> </span> </a> </span> </div>