Art.03.9.21

Copie du montage de mon article, modifié en 1000x562px et qui semble compliqué pour un visiteur... Survol.

Mes adresses sont modifiées par @1000x562px pour en alléger le transfert mais vous pouvez écrire les adresses non modifiées de vos images au ratio 16/9.

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;">
<p id="vend1" class="vend">&nbsp;</p>
<p id="vend2" class="vend">&nbsp;</p>
<p id="vend3" class="vend">&nbsp;</p>
</div>
<style><!--
.vend{position:absolute; z-index:1; width:300px; height:562px; border:6px ridge white; background-size:1000px 562px; transition:all 1s;}
#vend1{box-sizing:border-box; background:url('http://ekladata.com/jROUk89Yfcl_NXwZcWK4nzpoJq8@1000x562.jpg'); background-position:0px 0px; transform:translate(0px,0px);}
#vend2{box-sizing:border-box; background:url('http://ekladata.com/FQTzSODEK8GRpxUJ3tb8l2SvV7c@1000x562.jpg'); background-position:-350px 0px; transform:translate(350px,0px);}
#vend3{box-sizing:border-box; background:url('http://ekladata.com/5_RiHGW6Q5vFU3MUCb_iutbC1dk@1000x562.jpg'); background-position:-700px 0px; transform:translate(700px,0px);}
#vend1:hover,#vend2:hover,#vend3:hover{z-index:5; width:1000px; background-position:0px 0px; transform:translate(0px,0px);}
--></style>