• Art.24.7.21

    Un montage simple, pour 4 images à survoler, qui va me permettre de proposer des variantes pour des images au ratio 16/9 et au ratio 4/3 et en plaçant les images directement dans le code ou en les plaçant en fond de paragraphe; donc une série de 4 pages.

    Commençons par 4 images au ratio 16/9, dont les adresses sont placées directement dans le code; elles sont redimensionnées en 1000x562px pour alléger le transfert.

    SURVOL

    *******************
    <div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 20px auto; text-align: left;"><img id="bak1" class="bak" src="http://ekladata.com/lzjtAMikEgiMZCNIF5efeL_eY3A@1000x562.jpg" alt="" /> <img id="bak2" class="bak" src="http://ekladata.com/64v4G695hMSmr3TeGoyOqzOZbrA@1000x562.jpg" alt="" /> <img id="bak3" class="bak" src="http://ekladata.com/pIUtfOb9ZsteN3hWeHSXlqrUhXU@1000x562.jpg" alt="" /> <img id="bak4" class="bak" src="http://ekladata.com/RX-F_MPToG_We7nvvETS4lHGuAk@1000x562.jpg" alt="" />
    <p id="bak0">SURVOL</p>
    </div>

    <style><!--
    #bak0{position:absolute; z-index:1; width:120px; font-size:15px; transform:translate(460px,270px);}
    .bak{position:absolute; z-index:1; width:1000px; height:562px; transition:all 1s;}
    #bak1{transform:translate(-510px,-290px);}
    #bak2{transform:translate(510px,-290px);}
    #bak3{transform:translate(-510px,290px);}
    #bak4{transform:translate(510px,290px);}
    #bak1:hover,#bak2:hover,#bak3:hover,#bak4:hover{z-index:5; transform:translate(0px,0px);}
    --></style>