Eklablog Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science
Editer la page Suivre ce blog Administration + Créer mon blog
MENU
https://pourquoipas732.eklablog.com
montages par codes HTML/CSS
Menu
Dimanche connecté.

Dimanche connecté.

 

 

Survolez les lettres.

Ce principe d'article semble avoir intéresser alors, je vais publier la page explicative en rubrique "Accueil".

A

U

T

O

M

N

E

 

 

 

 

 

 

 


<div style="width: 1000px; height: 563px; margin: 10px auto; border: 4px ridge black; background: url('https://ekladata.com/xhnA6PTYCHYmQrIthv927Z4HHXU.jpg');">
<p id="m0">&nbsp;</p>
<p id="m1">Survolez les lettres.<br /><br />Ce principe d'article semble avoir int&eacute;resser alors, je vais publier la page explicative en rubrique "Accueil".</p>
<p id="m2" class="aa">A</p>
<p id="m3" class="aa">U</p>
<p id="m4" class="aa">T</p>
<p id="m5" class="aa">O</p>
<p id="m6" class="aa">M</p>
<p id="m7" class="aa">N</p>
<p id="m8" class="aa">E</p>
<p id="m9">&nbsp;</p>
<p id="m10">&nbsp;</p>
<p id="m11">&nbsp;</p>
<p id="m12">&nbsp;</p>
<p id="m13">&nbsp;</p>
<p id="m14">&nbsp;</p>
<p id="m15">&nbsp;</p>
</div>
<style><!--
#m0{position:absolute; z-index:9; width:50px; height:380px; background:rgba(0,0,0,0.5); transform:translate(910px,40px);}
#m1{position:absolute; z-index:3; width:800px; height:300px; margin:200px 50px; text-align:center; font-size:25pt; background:rgba(0,0,0,0.5); color:white;}
.aa{position:absolute; z-index:10; width:30px; text-align:center; font-size:35px; color:lime; font-size:bold; text-shadow:1px 1px black;}

#m2{ transform:translate(920px,50px);}
#m3{ transform:translate(920px,100px);}
#m4{ transform:translate(920px,150px);}
#m5{ transform:translate(920px,200px);}
#m6{ transform:translate(920px,250px);}
#m7{ transform:translate(920px,300px);}
#m8{ transform:translate(920px,350px);}

#m9{position:absolute; z-index:1; width:1000px; height:563px; background:url('https://ekladata.com/pdAWJ39QEUFOhylHOy57b-prQzI.jpg'); transition:all 1s linear; opacity:0;}
#m10{position:absolute; z-index:1; width:1000px; height:563px; background:url('https://ekladata.com/pu6WW2VWATxSdgl2Yzkjk5Iea3E.jpg'); transition:all 1s linear; opacity:0;}
#m11{position:absolute; z-index:1; width:1000px; height:563px; background:url('https://ekladata.com/31b5FTQbjyOo4RukC5H6-5iOFWY.jpg'); transition:all 1s linear; opacity:0;}
#m12{position:absolute; z-index:1; width:1000px; height:563px; background:url('https://ekladata.com/G82nlE1vnyi7dVAfNqvux85s--Y.jpg'); transition:all 1s linear; opacity:0;}
#m13{position:absolute; z-index:1; width:1000px; height:563px; background:url('https://ekladata.com/aHBC6Ovqx121hq--357vq8krruY.jpg'); transition:all 1s linear; opacity:0;}
#m14{position:absolute; z-index:1; width:1000px; height:563px; background:url('https://ekladata.com/xb5gaEICh6pNmlKVf-j44ouingg.jpg'); transition:all 1s linear; opacity:0;}
#m15{position:absolute; z-index:1; width:1000px; height:563px; background:url('https://ekladata.com/ZkZvi56Hc5qD2WyXlOUqT8zvbo4.jpg'); transition:all 1s linear; opacity:0;}


#m2:hover ~ #m9,#m3:hover ~ #m10,#m4:hover ~ #m11,#m5:hover ~ #m12,#m6:hover ~ #m13,#m7:hover ~ #m14, #m8:hover ~ #m15{z-index:8; opacity:1;}
--></style>