Art.23.8.21

7 images des fleurs du jardin, au ratio 16/9 pour un montage simple.

Survol

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; background: url('http://ekladata.com/bLDAjS4zN_kcELs5LTUkytDrkIY@1000x562.jpg'); background-size: cover;">
<p id="fl0">Survol</p>
<img id="fl1" class="fl" src="http://ekladata.com/BLs07kc-qAUFUjqbII-hpNA3D2g@1000x562.jpg" alt="" /> <img id="fl2" class="fl" src="http://ekladata.com/LVeTqZNJRRM9LowAXEDjZJiHtx4@1000x562.jpg" alt="" /> <img id="fl3" class="fl" src="http://ekladata.com/KhxQkINMl06-BN7kACqrppHXK4I@1000x562.jpg" alt="" /> <img id="fl4" class="fl" src="http://ekladata.com/q6JRPtNm5Twf2fS_5I3YwkLU6hw@1000x562.jpg" alt="" /> <img id="fl5" class="fl" src="http://ekladata.com/f2rJj_XNwY2DD4RUivPuXnEsuRA@1000x562.jpg" alt="" /> <img id="fl6" class="fl" src="http://ekladata.com/EMTXN8ObsXxSV7YuWEeEGkuYcyk@1000x562.jpg" alt="" /></div>

<style><!--
#fl0{position:absolute; z-index:1; width:160px; font-size:25px; color:white; text-shadow:1px 1px black; transform:translate(80px,20px);}
.fl{position:absolute; z-index:1; width:160px; height:90px; border:4px ridge white; transition:all 1s;}
#fl1{box-sizing:border-box; transform:translate(50px,100px);}
#fl2{box-sizing:border-box; transform:translate(50px,250px);}
#fl3{box-sizing:border-box; transform:translate(50px,400px);}
#fl4{box-sizing:border-box; transform:translate(790px,100px);}
#fl5{box-sizing:border-box; transform:translate(790px,250px);}
#fl6{box-sizing:border-box; transform:translate(790px,400px);}
#fl1:hover,#fl2:hover,#fl3:hover,#fl4:hover,#fl5:hover,#fl6:hover{z-index:5; width:1000px; height:562px; transform:translate(0px,0px);}
--></style>