Exemple 109

Clic sur chaque vignette pour afficher l'image en plein écran; retour par un clic sur l'image agrandie.

L'image agrandie s'affiche à partir du bord haut de votre montage.

<div style="width:60vw; height:7vw; margin:1vh auto; border:0.1vh solid black; text-align:left;">
<input id="vec1" class="vec" type="text">
<input id="vec2" class="vec" type="text">
<input id="vec3" class="vec" type="text">
<input id="vec4" class="vec" type="text">
<input id="vec5" class="vec" type="text">
<img id="ret1" class="ret" src="http://ekladata.com/d8jP7oFyA0SqiRo2VwAIFLI_TJc.jpg">
<img id="ret2" class="ret" src="http://ekladata.com/jdMywHUC9aufN0R-LBWE_-o7HcE.jpg">
<img id="ret3" class="ret" src="http://ekladata.com/2WBqyUhrsvR3EL5PvJWLiOS2ogg.jpg">
<img id="ret4" class="ret" src="http://ekladata.com/BqyurQ6_RlC1RheJhD55OBEEtzw.jpg">
<img id="ret5" class="ret" src="http://ekladata.com/n7njgZgfGZYp0Yo2RJHeXr1ipfc.jpg">
</div>
<style><!--
.vec{position:absolute; z-index:1; width:12vw; height:6.75vw; background-size:cover;}
#vec1{transform:translate(0vw,0vw); background:url('http://ekladata.com/d8jP7oFyA0SqiRo2VwAIFLI_TJc@250x140.jpg');}
#vec2{transform:translate(12vw,0vw); background:url('http://ekladata.com/jdMywHUC9aufN0R-LBWE_-o7HcE@250x140.jpg');}
#vec3{transform:translate(24vw,0vw); background:url('http://ekladata.com/2WBqyUhrsvR3EL5PvJWLiOS2ogg@250x140.jpg');}
#vec4{transform:translate(36vw,0vw); background:url('http://ekladata.com/BqyurQ6_RlC1RheJhD55OBEEtzw@250x140.jpg');}
#vec5{transform:translate(48vw,0vw); background:url('http://ekladata.com/n7njgZgfGZYp0Yo2RJHeXr1ipfc@250x140.jpg');}
.ret{position:absolute; z-index:100; width:0vw; height:0vw;}
#vec1:focus ~ #ret1,#vec2:focus ~ #ret2,#vec3:focus ~ #ret3,#vec4:focus ~ #ret4,#vec5:focus ~ #ret5{width:100vw; height:56.25vw; left:0; }
--></style>