Art.25a.7.21

6 images au ratio 16/9.

Clic sur chaque vignette; retour par un clic sur la grande image.

*************
<div style="width: 1000px; height: 500px; margin: 20px auto; text-align: left;"><input id="lav1" class="lav" src="http://ekladata.com/3LM-GxiTkwLd5dAe-ahQD0mH6gU@300x170.jpg" type="image" /> <input id="lav2" class="lav" src="http://ekladata.com/dSrEjMWtBxts376dPbO8iKrOO_w@300x170.jpg" type="image" /> <input id="lav3" class="lav" src="http://ekladata.com/71PiGozEFbv0-45Y9VgD-8szhuw@300x170.jpg" type="image" /> <input id="lav4" class="lav" src="http://ekladata.com/dUKpHtyVjndlhv6cHNW2U0nE4Ic@300x170.jpg" type="image" /> <input id="lav5" class="lav" src="http://ekladata.com/-dfIHyYiHu_SlWDqsyZ_MwouSgI@300x170.jpg" type="image" /> <input id="lav6" class="lav" src="http://ekladata.com/PqPUON6SX9BiALpI3N_ROHcWSjg@300x170.jpg" type="image" />
<p id="lav0">Clic sur chaque vignette; retour par un clic sur la grande image.</p>
<img id="pe1" class="pe" src="http://ekladata.com/3LM-GxiTkwLd5dAe-ahQD0mH6gU.jpg">
<img id="pe2" class="pe" src="http://ekladata.com/dSrEjMWtBxts376dPbO8iKrOO_w.jpg">
<img id="pe3" class="pe" src="http://ekladata.com/71PiGozEFbv0-45Y9VgD-8szhuw.jpg">
<img id="pe4" class="pe" src="http://ekladata.com/dUKpHtyVjndlhv6cHNW2U0nE4Ic.jpg">
<img id="pe5" class="pe" src="http://ekladata.com/-dfIHyYiHu_SlWDqsyZ_MwouSgI.jpg">
<img id="pe6" class="pe" src="http://ekladata.com/PqPUON6SX9BiALpI3N_ROHcWSjg.jpg">
</div>
<style><!--
.lav{position:absolute; z-index:1; box-sizing:border-box; width:300px; height:170px; border:6px ridge white; box-shadow:4px 4px 6px black;}
#lav1{transform:translate(10px, 50px);}
#lav2{transform:translate(350px, 50px);}
#lav3{transform:translate(690px, 50px);}
#lav4{transform:translate(10px, 270px);}
#lav5{transform:translate(350px, 270px);}
#lav6{transform:translate(690px, 270px);}
#lav0{position:absolute; z-index:1; width:1000px; text-align:center; font-size:25px; color:#ff00ff; text-shadow:2px 2px black;}
.pe{position:absolute; z-index:110; left:0; top:-50px; width:100%; height:0px; transition:all 1s;}
#lav1:focus ~ #pe1,#lav2:focus ~ #pe2,#lav3:focus ~ #pe3,#lav4:focus ~ #pe4,#lav5:focus ~ #pe5,#lav6:focus ~ #pe6{height:56.25%;}
--></style>