Art.8A.6.21

8 images au ratio 16/9.

Clic maintenu.

 

 

 

 

 

 

 

<div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 4px ridge white; box-shadow: 4px 4px 8px black; background: url('http://ekladata.com/Lr8cf_h3rVRwN-WgMtI0pInpSD8@1000x562.jpg'); background-size: 1000px 562px;">
<p id="vc0">Clic maintenu.</p>
<p id="vc1" class="vc">&nbsp;</p>
<p id="vc2" class="vc">&nbsp;</p>
<p id="vc3" class="vc">&nbsp;</p>
<p id="vc4" class="vc">&nbsp;</p>
<p id="vc5" class="vc">&nbsp;</p>
<p id="vc6" class="vc">&nbsp;</p>
<p id="vc7" class="vc">&nbsp;</p>
<img id="clp1" class="clp" src="http://ekladata.com/8oluHrr7QzBxqgk6CWpcirbT5F4@1000x562.jpg" alt="" />
<img id="clp2" class="clp" src="http://ekladata.com/nC79a3cNeTp4vsqUerK4hO_hrYk@1000x562.jpg" alt="" />
<img id="clp3" class="clp" src="http://ekladata.com/hdc1Lz_9mjFeoWCmoE6lLYOisNg@1000x562.jpg" alt="" />
<img id="clp4" class="clp" src="http://ekladata.com/WKPGxIo-0U9PQwrnlfAFpypyOgQ@1000x562.jpg" alt="" />
<img id="clp5" class="clp" src="http://ekladata.com/cbG-48Q7y0Pg34thEOaeuVSOns4@1000x562.jpg" alt="" />
<img id="clp6" class="clp" src="http://ekladata.com/jW0pkshVrmx38Ce7NXZufNtQK4Q@1000x562.jpg" alt="" />
<img id="clp7" class="clp" src="http://ekladata.com/TXdtewZ035KH6F3Rt2iDVfg8GCk@1000x562.jpg" alt="" />
</div>

<style><!--
#vc0{position:absolute; z-index:1; width:250px; height:40px; text-align:center;  line-height:40px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(200px,10px);}
.vc{position:absolute; z-index:1; width:30px; height:30px; border-radius:50%; background:white; box-shadow:inset -4px -4px 6px black;}
#vc1{transform:translate(500px,10px);}
#vc2{transform:translate(550px,10px);}
#vc3{transform:translate(600px,10px);}
#vc4{transform:translate(650px,10px);}
#vc5{transform:translate(700px,10px);}
#vc6{transform:translate(750px,10px);}
#vc7{transform:translate(800px,10px);}
.clp{position:absolute; z-index:5; width:1000px; height:562px; transform:translate(0px,-570px); clip-path:polygon(30% 0%, 70% 0%, 50% 100%, 50% 100%); transition:transform 1s 0s, clip-path 1s 1s;}
#vc1:active ~ #clp1,#vc2:active ~ #clp2,#vc3:active ~ #clp3,#vc4:active ~ #clp4,#vc5:active ~ #clp5,#vc6:active ~ #clp6,#vc7:active ~ #clp7{transform:translate(0px,0px); clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>