Exemple 111

Images au ratio 16/9; code sans javascript.

Survol de chaque image pour l'agrandir puis clic dessus pour la changer; retour par un clic sur l'image agrandie.

<div style="width: 60vw; height: 34vw; margin: 1vh auto; text-align: left;"><input id="decor1" class="decor" src="http://ekladata.com/rBkZwfGPM9vV8k8ZjUJdQyYzXRY.jpg" type="image" /> <input id="decor2" class="decor" src="http://ekladata.com/w8LDwAGBj9IhPNC5CRgQxiDmtBI.jpg" type="image" /> <input id="decor3" class="decor" src="http://ekladata.com/0O1bwiEQMJRQU3KHb-XvNOn9axs.jpg" type="image" /> <input id="decor4" class="decor" src="http://ekladata.com/Wd7_tsNo39sJOf_8hdanFoctbqA.jpg" type="image" />
<p id="deco1" class="deco">&nbsp;</p>
<p id="deco2" class="deco">&nbsp;</p>
<p id="deco3" class="deco">&nbsp;</p>
<p id="deco4" class="deco">&nbsp;</p>
</div>
<style><!--
.decor{position:absolute; z-index:2; width:30vw; height:17vw; border:0.4vh ridge white; transition:all 0.5s linear;}
#decor1{box-sizing:border-box; transform:translate(0vw,0vw);}
#decor2{box-sizing:border-box; transform:translate(30vw,0vw);}
#decor3{box-sizing:border-box; transform:translate(0vw,17vw);}
#decor4{box-sizing:border-box; transform:translate(30vw,17vw);}
.deco{position:absolute; z-index:1; width:60vw; height:34vw; transform:translate(0vw,0vw); transition:all 0.2s linear;}
#deco1{background:url('http://ekladata.com/az2kHqBj3Tq0gGSXJBDgxQvswbA.jpg'); background-size:60vw 34vw;}
#deco2{background:url('http://ekladata.com/nOKHXSxOhan7ru10_Ywe15U-7D0.jpg'); background-size:60vw 34vw;}
#deco3{background:url('http://ekladata.com/IOtb1FmSbBgkY9uIj_WD7jhsHoQ.jpg'); background-size:60vw 34vw;}
#deco4{background:url('http://ekladata.com/iDhLkVGlIosWPzwHGb-IaOh_LVY.jpg'); background-size:60vw 34vw;}
#decor1:hover,#decor2:hover,#decor3:hover,#decor4:hover{z-index:4; width:60vw; height:34vw; transform:translate(0vw,0vw);}
#decor1:focus ~ #deco1,#decor2:focus ~ #deco2,#decor3:focus ~ #deco3,#decor4:focus ~ #deco4{z-index:10; width:60vw; height:34vw; opacity:1;}
--></style>