Version Clic

Le code est plus long qu'au survol puisqu'il y autant de boutons en plus que d'images.

Un clic sur la vignette pour l'agrandir et un clic pour la réduire.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white; background: url('http://ekladata.com/O1q9Z2TrvYlwcdsISsUUwpp820U.jpg'); background-size: cover;"><input id="z1" class="z" type="text" /> <input id="z2" class="z" type="text" /> <input id="z3" class="z" type="text" /> <input id="z4" class="z" type="text" /> <input id="z5" class="z" type="text" /> <input id="z6" class="z" type="text" /> <input id="z7" class="z" type="text" /> <input id="z8" class="z" type="text" /> <input id="z9" class="z" type="text" /> <input id="z10" class="z" type="text" />
<p id="p0">Clic</p>
<p id="p1" class="p">&nbsp;</p>
<p id="p2" class="p">&nbsp;</p>
<p id="p3" class="p">&nbsp;</p>
<p id="p4" class="p">&nbsp;</p>
<p id="p5" class="p">&nbsp;</p>
<p id="p6" class="p">&nbsp;</p>
<p id="p7" class="p">&nbsp;</p>
<p id="p8" class="p">&nbsp;</p>
<p id="p9" class="p">&nbsp;</p>
<p id="p10" class="p">&nbsp;</p>
</div>

<style><!--
.z{position:absolute; z-index:5; width:5vw; height:5vw; border-radius:50%; border:none; background:none;}
#z1{transform:translate(2vw,2vw);}
#z2{transform:translate(2vw,8vw);}
#z3{transform:translate(2vw,14vw);}
#z4{transform:translate(2vw,20vw);}
#z5{transform:translate(2vw,26vw);}
#z6{transform:translate(53vw,2vw);}
#z7{transform:translate(53vw,8vw);}
#z8{transform:translate(53vw,14vw);}
#z9{transform:translate(53vw,20vw);}
#z10{transform:translate(53vw,26vw);}
#p0{position:absolute; z-index:1; width:10vw; background:rgba(0,0,0,0.5); transform:translate(25vw,1vw); text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black;}
.p{position:absolute; z-index:1; width:5vw; height:5vw; border-radius:50%; box-shadow:inset 0.4vh 0.4vh 0.6vh white, inset -0.4vh -0.4vh 0.6vh black; transition:all 1s linear;}
#p1{background:url('http://ekladata.com/g9N0JJ9c18AHG8_xFN8BYrCYSxo.jpg'); background-size:cover;transform:translate(2vw,2vw) rotatey(350deg);}
#p2{background:url('http://ekladata.com/S9gzFlUmRvyG7E3pNNaQGLWb5-o.jpg'); background-size:cover;transform:translate(2vw,8vw) rotatey(350deg);}
#p3{background:url('http://ekladata.com/qcPFenZjkYeswz0Sjjb4icMbiv0.jpg'); background-size:cover;transform:translate(2vw,14vw) rotatey(350deg);}
#p4{background:url('http://ekladata.com/IfM6gYiHLD9f08oi2wh23uR-EaM.jpg'); background-size:cover;transform:translate(2vw,20vw) rotatey(350deg);}
#p5{background:url('http://ekladata.com/PLwFkX7fEIPKQyTHiDF8OhomNEA.jpg'); background-size:cover;transform:translate(2vw,26vw) rotatey(350deg);}
#p6{background:url('http://ekladata.com/YqfaHg20SRIXuHmN6eoyAxqqP_M.jpg'); background-size:cover;transform:translate(53vw,2vw) rotatey(350deg);}
#p7{background:url('http://ekladata.com/9Vnm4iqH8kJ2uPM5XtutalsErpk.jpg'); background-size:cover;transform:translate(53vw,8vw) rotatey(350deg);}
#p8{background:url('http://ekladata.com/cAmjscGnMCuFTCYUIYf9ZF84vGA.jpg'); background-size:cover;transform:translate(53vw,14vw) rotatey(350deg);}
#p9{background:url('http://ekladata.com/go2JZ-I8hzIzCj1cS2biacW-4FA.jpg'); background-size:cover;transform:translate(53vw,20vw) rotatey(350deg);}
#p10{background:url('http://ekladata.com/W43MhZBDFEyKvClaID7_yRYJmF4.jpg'); background-size:cover;transform:translate(53vw,26vw) rotatey(350deg);}
#z1:focus ~ #p1,#z2:focus ~ #p2,#z3:focus ~ #p3,#z4:focus ~ #p4,#z5:focus ~ #p5,#z6:focus ~ #p6,#z7:focus ~ #p7,#z8:focus ~ #p8,#z9:focus ~ #p9,#z10:focus ~ #p10{z-index:100; width:60vw; height:33.75vw; border-radius:0%; box-shadow:none; transform:trans