-
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.
*******************
<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>