• Exemple 221a

    Même montage avec animation par rotation horizontale

    Survol

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; border: 1px solid black; margin: 5px auto; background: url('http://ekladata.com/PcNZ4jj86yuXJ1v1yKl2V00J3wo.jpg'); background-size: cover; text-align: left;">
    <p id="bta0">Survol</p>
    <p id="bta1" class="bta">&nbsp;</p>
    <p id="bta2" class="bta">&nbsp;</p>
    <p id="bta3" class="bta">&nbsp;</p>
    <p id="bta4" class="bta">&nbsp;</p>
    <p id="bta5" class="bta">&nbsp;</p>
    <p id="bta6" class="bta">&nbsp;</p>
    <p id="bta7" class="bta">&nbsp;</p>
    <img id="mga1" class="mga" src="http://ekladata.com/r0X64Ne9ey577inDUvr8dbZvKPM.jpg" alt="" /> <img id="mga2" class="mga" src="http://ekladata.com/b7GyW80II7laDtiBbxEoqWDpaA4.jpg" alt="" /> <img id="mga3" class="mga" src="http://ekladata.com/HElbgDdjUHIPFT8efxgrgURyCNk.jpg" alt="" /> <img id="mga4" class="mga" src="http://ekladata.com/-JSU_cgEStiIlZ10GMthXXj5WrA.jpg" alt="" /> <img id="mga5" class="mga" src="http://ekladata.com/k6Bai4d_hmgczfyZsZW4PlseVFw.jpg" alt="" /> <img id="mga6" class="mga" src="http://ekladata.com/efsZgR14sJNGTLxX1QtcI1zkSco.jpg" alt="" /> <img id="mga7" class="mga" src="http://ekladata.com/PXawwLjPVrp13PQAtm_x0IxhLtQ.jpg" alt="" /></div>

    <style><!--
    #bta0{position:absolute; z-index:1; width:130px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(850px,20px);}
    .bta{position:absolute; z-index:5; width:30px; height:30px; border-radius:50%; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; background:lime;}
    .bta:hover{background:red;}
    #bta1{transform:translate(930px,80px);}
    #bta2{transform:translate(930px,130px);}
    #bta3{transform:translate(930px,180px);}
    #bta4{transform:translate(930px,230px);}
    #bta5{transform:translate(930px,280px);}
    #bta6{transform:translate(930px,330px);}
    #bta7{transform:translate(930px,380px);}
    .mga{position:absolute; z-index:1; width:1000px; height:563px; transform:rotatey(90deg); filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 1s;}
    #bta1:hover ~ #mga1,#bta2:hover ~ #mga2,#bta3:hover ~ #mga3,#bta4:hover ~ #mga4,#bta5:hover ~ #mga5,#bta6:hover ~ #mga6,#bta7:hover ~ #mga7{transform:rotatey(0deg); filter:grayscale(0);}
    --></style>