• Exemple 199

    5 images au ratio 16/9

     

    Survol

     

     

     

     

     

    <div style="position: relative; width: 1000px; height: 562px; margin: 5px auto;">

    <p id="inf">Survol</p>

    <p id="vg1" class="vg">&nbsp;</p>

    <p id="vg2" class="vg">&nbsp;</p>

    <p id="vg3" class="vg">&nbsp;</p>

    <p id="vg4" class="vg">&nbsp;</p>

    <p id="vg5" class="vg">&nbsp;</p>

    </div>

     

    <style><!--

    #inf{position:absolute; z-index:1; width:350px; font-size:40px; color:aqua; text-shadow:2px 2px grey; transform:translate(300px,20px);}

    .vg{position:absolute; z-index:1; width:320px; height:180px; border:6px ridge white; transition:all 1s linear;}

    #vg1{background:url('http://ekladata.com/fgo-0CtM2b_-3_U1ePCIsHOVEuk.jpg'); background-size:1000px 562px; transform:translate(50px,80px) rotate(-30deg);}

    #vg2{background:url('http://ekladata.com/ZI3eAkLUbTlRL1Y0zdHzS_6Pqno.jpg'); background-size:1000px 562px; transform:translate(600px,80px) rotate(30deg);}

    #vg3{background:url('http://ekladata.com/LqGEd2IqFQBm94nfv06tDwMEurQ.jpg'); background-size:1000px 562px; transform:translate(320px,180px) rotate(0deg);}

    #vg4{background:url('http://ekladata.com/np7td1RNMDWHdi_lhZL94uqJruM.jpg'); background-size:1000px 562px; transform:translate(50px,280px) rotate(30deg);}

    #vg5{background:url('http://ekladata.com/8J_oHWe39WDeEajJ2Ndip0Rnvug.jpg'); background-size:1000px 562px; transform:translate(600px,280px) rotate(-30deg);}

    #vg1:hover,#vg2:hover,#vg3:hover,#vg4:hover,#vg5:hover{z-index:5; width:1000px; height:562px; transform:translate(0px,0px) rotate(0deg);}

    --></style>