• Art.24a.7.21

    Même principe: 4 images au ratio 16/9, placées en fond de paragraphe, avec bordure et dont la partie visible correspond à la position dans le montage (background-position/transform:translate();)

    SURVOL

     

     

     

     

    ******************
    <div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;">
    <p id="bak0">SURVOL</p>
    <p id="bak1" class="bak">&nbsp;</p>
    <p id="bak2" class="bak">&nbsp;</p>
    <p id="bak3" class="bak">&nbsp;</p>
    <p id="bak4" class="bak">&nbsp;</p>
    </div>

    <style><!--
    #bak0{position:absolute; z-index:1; width:120px; font-size:15px; transform:translate(460px,260px);}
    .bak{position:absolute; z-index:1; width:480px; height:250px; border:8px ridge white; background-size:1000px 562px; transition:all 1s;}
    #bak1{box-sizing:border-box; background:url('http://ekladata.com/lzjtAMikEgiMZCNIF5efeL_eY3A@1000x562.jpg'); background-position:0px 0px; transform:translate(0px,0px);}
    #bak2{box-sizing:border-box; background:url('http://ekladata.com/64v4G695hMSmr3TeGoyOqzOZbrA@1000x562.jpg'); background-position:-510px 0px; transform:translate(510px,0px);}
    #bak3{box-sizing:border-box; background:url('http://ekladata.com/pIUtfOb9ZsteN3hWeHSXlqrUhXU@1000x562.jpg'); background-position:0px -290px; transform:translate(0px,290px);}
    #bak4{box-sizing:border-box; background:url('http://ekladata.com/RX-F_MPToG_We7nvvETS4lHGuAk@1000x562.jpg'); background-position:-510px -290px; transform:translate(510px,290px);}
    #bak1:hover,#bak2:hover,#bak3:hover,#bak4:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>