Exemple 66

Clic sur chaque vignette. Retour par clic sur l'iamge agrandie.

<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/IB27bsOzD4bmCkvISapNmHMbh-Y@1152x684.jpg'); background-size: cover;">

<input id="br1" class="br" src="http://ekladata.com/axabqRbqReFWuJ8gIcfoqNBYvvA@154x87.jpg" type="image" />

<input id="br2" class="br" src="http://ekladata.com/FZkJDGkm8GOJqWU-lildupf026k@154x87.jpg" type="image" />

<input id="br3" class="br" src="http://ekladata.com/fHOdqETUdIqfrdhNPWHEjB7n9oI@154x87.jpg" type="image" />

<input id="br4" class="br" src="http://ekladata.com/nrO01iKK1hr0BB8SmOtZ_VNrI0I@154x87.jpg" type="image" />

<input id="br5" class="br" src="http://ekladata.com/A1zi4Lg5itmdCxw6bCDtfMH6JxY@154x87.jpg" type="image" />

<input id="br6" class="br" src="http://ekladata.com/iWK4waJkVj-ITY2eZwIfEW9uK24@154x87.jpg" type="image" />

<input id="br7" class="br" src="http://ekladata.com/EQjwd8wq2wjErK9wGYMDlrVrGEs@154x87.jpg" type="image" />

<input id="br8" class="br" src="http://ekladata.com/DvVzH-yT2MnQGa6s1LcBEVlOSI4@154x87.jpg" type="image" />

<img id="gr1" src="http://ekladata.com/axabqRbqReFWuJ8gIcfoqNBYvvA.jpg" alt="" />

<img id="gr2" src="http://ekladata.com/FZkJDGkm8GOJqWU-lildupf026k.jpg" alt="" />

<img id="gr3" src="http://ekladata.com/fHOdqETUdIqfrdhNPWHEjB7n9oI.jpg" alt="" />

<img id="gr4" src="http://ekladata.com/nrO01iKK1hr0BB8SmOtZ_VNrI0I.jpg" alt="" />

<img id="gr5" src="http://ekladata.com/A1zi4Lg5itmdCxw6bCDtfMH6JxY.jpg" alt="" />

<img id="gr6" src="http://ekladata.com/iWK4waJkVj-ITY2eZwIfEW9uK24.jpg" alt="" />

<img id="gr7" src="http://ekladata.com/EQjwd8wq2wjErK9wGYMDlrVrGEs.jpg" alt="" />

<img id="gr8" src="http://ekladata.com/DvVzH-yT2MnQGa6s1LcBEVlOSI4.jpg" alt="" /></div>

<style><!--
.br{position:absolute; z-index:1; width:6vw; height:6vw; border-radius:50%; box-shadow:0.4vh 0.4vh 0.6vh black; border:0.4vh solid white;}
#br1{transform:translate(2vw,2vw);}
#br2{transform:translate(2vw,10vw);}
#br3{transform:translate(2vw,18vw);}
#br4{transform:translate(2vw,26vw);}
#br5{transform:translate(51vw,2vw);}
#br6{transform:translate(51vw,10vw);}
#br7{transform:translate(51vw,18vw);}
#br8{transform:translate(51vw,26vw);}
#gr1, #gr2,#gr3, #gr4,#gr5,#gr6,#gr7,#gr8{position:absolute; z-index:10; width:99vw; height:0vw; left:0; transform:translate(0vw,-3vw); display:none;}
#br1:focus ~ #gr1,#br2:focus ~ #gr2,#br3:focus ~ #gr3,#br4:focus ~ #gr4,#br5:focus ~ #gr5,#br6:focus ~ #gr6,#br7:focus ~ #gr7,#br8:focus ~ #gr8{display:block; height:56vw; }
--></style>

J'héberge mes images sur Ekla, dans des galeries; elles sont au format 1920x1080px.

Chaque adresse d'image sert pour la vignette, en en réduisant la taille en 154x87px et pour la grande image .