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