Diapo2 clic

Essayons une autre animation.

<div style="position: relative; width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; box-shadow: 0.4vh 0.4vh 0.7vh black; overflow: hidden;"><input id="st1" src="http://ekladata.com/fj1bBmD93XV9ldVlVPZ55U-8sG4@1152x648.jpg" type="image" /> <input id="st2" class="st" src="http://ekladata.com/x_RZljzipuIeMRDuvRdZohK7W6A@1152x648.jpg" type="image" /> <input id="st3" class="st" src="http://ekladata.com/2OEWqsM0S6simlJRB5P12gJymj8@1152x648.jpg" type="image" /> <input id="st4" class="st" src="http://ekladata.com/eTnBdsE2wUt63GnP-JhbxO01d28@1152x648.jpg" type="image" /> <input id="st5" class="st" src="http://ekladata.com/6d66iaSJO-urD-w5KGo9eLYPDRU@1152x648.jpg" type="image" /> <input id="st6" class="st" src="http://ekladata.com/DGAmtaj1gmVlc9Mr2Yrstm7_L0k@1152x648.jpg" type="image" /> <input id="st7" class="st" src="http://ekladata.com/-9mbSr3PYKWXRsKa1Tv11RCx4QY@1152x648.jpg" type="image" /> <input id="st8" class="st" src="http://ekladata.com/LQgEz0eK6R5IcW68bKR8HMyIaK0@1152x648.jpg" type="image" /> <input id="st9" class="st" src="http://ekladata.com/Wu6xQKlZfHyKreljBulEcCje9TQ@1152x648.jpg" type="image" /> <input id="st10" class="st" src="http://ekladata.com/sh-lzNmAJV7MOcb1swWCMKnNNXk@1152x648.jpg" type="image" /> <input id="st11" class="st" src="http://ekladata.com/69ygAF6zPXqtYgpQv5SHiUyKBXc@1152x648.jpg" type="image" /> <input id="st12" class="st" src="http://ekladata.com/gGAd_IZ2QpqTtyC8aZVYYgNl6bM@1152x648.jpg" type="image" />
<p id="exp">Avancement au clic</p>
</div>

<style><!--
#exp{position:absolute; z-index:2; width:20vw; background:rgba(0,0,0,0.5); font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black;transform:translate(40vw,30vw);}
.st{position:absolute; width:0vw; height:0vw; transform:translate(30vw,16vw);transition:transform 1s linear ,width 1s linear,height 1s linear,z-index 0s linear;}
#st1{position:absolute; width:60vw; height:33.75vw;}
#st2,#st3,#st4,#st5,#st6,#st7,#st8,#st9,#st10,#st11,#st12{z-index:1;}
#st1:focus ~ #st2,#st2:focus ~ #st3,#st3:focus ~ #st4,#st4:focus ~ #st5,#st5:focus ~ #st6,#st6:focus ~ #st7,#st7:focus ~ #st8,#st8:focus ~ #st9,#st9:focus ~ #st10,#st10:focus ~ #st11,#st11:focus ~ #st12{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
--></style>