Exemple 39

6+1 images au ration 16/9.

Clic sur chaque étoile puis retour par un clic sur l'image agrandie.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; text-align: left; margin: 1vh auto; background: url('http://ekladata.com/eUInvVhv5VgqFJImcG7OOJmJJvw.jpg'); background-size: cover;">
<input id="et1" class="et" src="http://ekladata.com/l_CkH0MBh6kbGROSdwJHc-ziils@190x190.jpg" type="image" />
<img id="ple1" class="ple" src="http://ekladata.com/l_CkH0MBh6kbGROSdwJHc-ziils.jpg" alt="" />
<input id="et2" class="et" src="http://ekladata.com/LLjSiAV49HwHjaLdKE1cEKAa7Jw@190x190.jpg" type="image" />
<img id="ple2" class="ple" src="http://ekladata.com/LLjSiAV49HwHjaLdKE1cEKAa7Jw.jpg" alt="" />
<input id="et3" class="et" src="http://ekladata.com/njr9RQy_lkRV71jReOAFzKmAZ3M@190x190.jpg" type="image" />
<img id="ple3" class="ple" src="http://ekladata.com/njr9RQy_lkRV71jReOAFzKmAZ3M.jpg" alt="" />
<input id="et4" class="et" src="http://ekladata.com/T5BY8gvdj-4ZwB_b8sjx9KFHGiE@190x190.jpg" type="image" />
<img id="ple4" class="ple" src="http://ekladata.com/T5BY8gvdj-4ZwB_b8sjx9KFHGiE.jpg" alt="" />
<input id="et5" class="et" src="http://ekladata.com/N7gUOixVR8fJXc8KuAhD4OtricI@190x190.jpg" type="image" />
<img id="ple5" class="ple" src="http://ekladata.com/N7gUOixVR8fJXc8KuAhD4OtricI.jpg" alt="" />
<input id="et6" class="et" src="http://ekladata.com/BjQ74KGcqqw8qdphdQoYo7mOs_s@190x190.jpg" type="image" />
<img id="ple6" class="ple" src="http://ekladata.com/BjQ74KGcqqw8qdphdQoYo7mOs_s.jpg" alt="" />
</div>
<style><!--
.et{position:absolute; z-index:2; width:10vw; height:10vw; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
#et1{transform:translate(2vw,1vw);}
#et2{transform:translate(2vw,12vw);}
#et3{transform:translate(2vw,23vw);}
#et4{transform:translate(48vw,1vw);}
#et5{transform:translate(48vw,12vw);}
#et6{transform:translate(48vw,23vw);}
.ple{position:absolute; z-index:100; width:0vw; height:0vw; top:25vw; left:50vw; opacity:0; transition:all 1s linear;}
#et1:focus ~ #ple1,#et2:focus ~ #ple2,#et3:focus ~ #ple3,#et4:focus ~ #ple4,#et5:focus ~ #ple5,#et6:focus ~ #ple6{width:100vw; height:56.25vw; top:7vw; left:0vw; opacity:1;}
--></style>