Montage 124

8 images au ratio 16/9

<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh 0 0 20vw; background: radial-gradient(ellipse at center, #666600 0%, #ffffff 100%);">
<p id="dd">Clic maintenu</p>
<p id="sc1" class="sc">&nbsp;</p>
<p id="sc2" class="sc">&nbsp;</p>
<p id="sc3" class="sc">&nbsp;</p>
<p id="sc4" class="sc">&nbsp;</p>
<p id="sc5" class="sc">&nbsp;</p>
<p id="sc6" class="sc">&nbsp;</p>
<p id="sc7" class="sc">&nbsp;</p>
<p id="sc8" class="sc">&nbsp;</p>
</div>
<style><!--
#dd{position:absolute; z-index:1; width:12vw; font-size:1.5vw; transform:translate(0vw,0vw);}
.sc{position:absolute; z-index:1; width:56vw; height:30vw; border-radius:50%;transform:translate(2vw,2vw);transition:all 1s linear;}
#sc1{background:url('http://ekladata.com/yCHsZhqui_ljA1C2RP93wofkLT0.jpg'); background-size:cover; border-radius:50%; -webkit-clip-path: polygon(50% 50%, 50% 50%, 0% 49%, 0% 1%); clip-path: polygon(50% 50%, 0% 49%, 0% 1%);}
#sc2{background:url('http://ekladata.com/UtG1eL_GS4NnkFerhG94A3zgMM0.jpg'); background-size:cover; border-radius:50%; -webkit-clip-path: polygon(50% 50%, 50% 50%, 1% 0%, 49.5% 0%); clip-path: polygon(50% 50%, 1% 0%, 49.5% 0%);}
#sc3{background:url('http://ekladata.com/xiFOwQW3g6xCiZblNDcG_BPk9xY.jpg'); background-size:cover; border-radius:50%; -webkit-clip-path: polygon(50% 50%, 50% 50%, 50.5% 0%, 99% 0%); clip-path: polygon(50% 50%, 50.5% 0%, 99% 0%);}
#sc4{background:url('http://ekladata.com/Cab50FzD6QuhiKlSKfZpccwHLDg.jpg'); background-size:cover; border-radius:50%; -webkit-clip-path: polygon(50% 50%, 50% 50%, 100% 1%, 100% 49%); clip-path: polygon(50% 50%, 100% 1%, 100% 49%);}
#sc5{background:url('http://ekladata.com/JK8sqCIR0QhQPo4Fomyqv6nk-KI.jpg'); background-size:cover; border-radius:50%; -webkit-clip-path: polygon(50% 50%, 50% 50%, 100% 51%, 100% 99%); clip-path: polygon(50% 50%, 100% 51%, 100% 99%);}
#sc6{background:url('http://ekladata.com/OVgwsc-pJvXfDj8ytShRrXtRaNk.jpg'); background-size:cover; border-radius:50%; -webkit-clip-path: polygon(50% 50%, 50% 50%, 99% 100%, 50.5% 100%); clip-path: polygon(50% 50%, 99% 100%, 50.5% 100%);}
#sc7{background:url('http://ekladata.com/UYn-PcbR31fph_jXjjEAsNawN-8.jpg'); background-size:cover; border-radius:50%; -webkit-clip-path: polygon(50% 50%, 50% 50%, 49.5% 100%, 1% 100%); clip-path: polygon(50% 50%, 49.5% 100%, 1% 100%);}
#sc8{background:url('http://ekladata.com/IPvwmNLwhcweH-3R16Eu50RgJl4.jpg'); background-size:cover; border-radius:50%; -webkit-clip-path: polygon(50% 50%, 50% 50%, 0% 99%, 0% 51%); clip-path: polygon(50% 50%, 0% 99%, 0% 51%);}
#sc1:active,#sc2:active,#sc3:active,#sc4:active,#sc5:active,#sc6:active,#sc7:active,#sc8:active{z-index:10; width:100vw; height:56.25vw; border-radius:0%; transform:translate(-20.5vw,0vw); -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);}
--></style>