• Art.18.2.21

     

    SURVOL

     

     

     

     

     

     

    **************
    <div style="width: 1000px; height: 563px; margin: 25px auto; text-align: left;">
    <p id="sv">SURVOL</p>
    <p id="prt1" class="prt">&nbsp;</p>
    <p id="prt2" class="prt">&nbsp;</p>
    <p id="prt3" class="prt">&nbsp;</p>
    <p id="prt4" class="prt">&nbsp;</p>
    <p id="prt5" class="prt">&nbsp;</p>
    <p id="prt6" class="prt">&nbsp;</p>
    </div>
    <style><!--
    #sv{position:absolute; z-index:1; width:120px; font-size:25px; transform:translate(390px,265px);}
    .prt{position:absolute; z-index:1; width:300px; height:250px; background-size:1000px 563px; transition:all 1s;}
    #prt1{background:url('http://ekladata.com/qJLvyGPDucIpKxcj3Ppy4pV-qHc@1000x563.jpg'); background-position:0px 0px; transform:translate(0px,0px);}
    #prt2{background:url('http://ekladata.com/U97b0_xuVMMnI4aTFvJbRzah9qQ@1000x563.jpg'); background-position:-350px 0px; transform:translate(350px,0px);}
    #prt3{background:url('http://ekladata.com/TR5h5SaCkQNhHV9ztPnRe7fE6w0@1000x563.jpg'); background-position:-700px 0px; transform:translate(700px,0px);}
    #prt4{background:url('http://ekladata.com/7-bM6t26VNUBD01jX9alhhrTpy4@1000x563.jpg'); background-position:0px -313px; transform:translate(0px,313px);}
    #prt5{background:url('http://ekladata.com/TfUlhn5FEwPUrN8guV7bgaj67mw@1000x563.jpg'); background-position:-350px -313px; transform:translate(350px,313px);}
    #prt6{background:url('http://ekladata.com/B4kxjyx6qxeJZFmZPIwKiOmZeys@1000x563.jpg'); background-position:-700px -313px; transform:translate(700px,313px);}
    #prt1:hover,#prt2:hover,#prt3:hover,#prt4:hover,#prt5:hover,#prt6:hover{z-index:5; width:1000px; height:563px; background-position:0px 0px;transform:translate(0px,0px);}
    --></style>

    *****************

    6 images dimensionnées en 1000x563px (ratio 16/9 dans mon cas) dans un cadre de 1000x563px.

    Selon la taille et le ratio de vos images, remplacez mes adresses par les vôtres et mes dimensions par les vôtres également... et pi c'est tout !