Montage 96 ter

7 images horizontales au ratio 16/9

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: url('http://ekladata.com/JUY1dRK-Fw2X0t8J5rTs9LgJ27s.jpg'); background-size: 60vw 33.75vw;">
<p id="cp0">Clic maintenu</p>
<p id="cp1">&nbsp;</p>
<p id="cp2">&nbsp;</p>
<p id="cp3">&nbsp;</p>
<p id="cp4">&nbsp;</p>
<p id="cp5">&nbsp;</p>
<p id="cp6">&nbsp;</p>
</div>

<style><!--
#cp0{position:absolute; z-index:1; width:10vw; border:0.1vh solid white; font-size:1.2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(25vw,0.5vw);}
#cp1{position:absolute; z-index:1; width:9vw; height:9vw; border-radius:50%; background:url('http://ekladata.com/4W9bdXSN4k07wqnfGFZtVTTbpZU.jpg'); background-size:60vw 33.75vw; background-position:0vw -2vw; transform:translate(0vw,2vw); -webkit-clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%); clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%);transition:all 1s linear;}
#cp2{position:absolute; z-index:1; width:9vw; height:9vw; border-radius:50%; background:url('http://ekladata.com/LHnMza956BbkvdjJm77RHLCvhvg.jpg'); background-size:60vw 33.75vw; background-position:0vw -12vw; transform:translate(0vw,12vw); -webkit-clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%); clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%);transition:all 1s linear;}
#cp3{position:absolute; z-index:1; width:9vw; height:9vw; border-radius:50%; background:url('http://ekladata.com/EwL-Gm98fufAgI_ijTvNUdTPfVE.jpg'); background-size:60vw 33.75vw; background-position:0vw -22vw; transform:translate(0vw,22vw); -webkit-clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%); clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%);transition:all 1s linear;}
#cp4{position:absolute; z-index:1; width:9vw; height:9vw; border-radius:50%; background:url('http://ekladata.com/LcESiHx7L36DodVeKzyr9JFmzt4.jpg'); background-size:60vw 33.75vw; background-position:-51vw -2vw; transform:translate(51vw,2vw); -webkit-clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%); clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%);transition:all 1s linear;}
#cp5{position:absolute; z-index:1; width:9vw; height:9vw; border-radius:50%; background:url('http://ekladata.com/rvwZKKUhM30vn2NQKz4FYRKPac0.jpg'); background-size:60vw 33.75vw; background-position:-51vw -12vw; transform:translate(51vw,12vw); -webkit-clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%); clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%);transition:all 1s linear;}
#cp6{position:absolute; z-index:1; width:9vw; height:9vw; border-radius:50%; background:url('http://ekladata.com/-O2a5uxtsQWc2aAE_CLFsPyK9Pc.jpg'); background-size:60vw 33.75vw; background-position:-51vw -22vw; transform:translate(51vw,22vw); -webkit-clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%); clip-path: polygon(100% 0%, 0% 100%, 0% 0%, 100% 100%);transition:all 1s linear;}

#cp1:active, #cp2:active, #cp3:active{z-index:5; width:60vw; height:33.75vw; border-radius:0%; transform:translate(0vw,0vw); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); background-position:0vw 0vw;}
#cp4:active, #cp5:active, #cp6:active{z-index:5; width:60vw; height:33.75vw; border-radius:0%; transform:translate(0vw,0vw); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);background-position:0vw 0vw;}
--></style>