Montage 108

Clic maintenu. 7 images au ratio 16/9

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
<p id="cad1">&nbsp;</p>
<p id="cad1a">&nbsp;</p>
<p id="cad2">&nbsp;</p>
<p id="cad2a">&nbsp;</p>
<p id="cad3">&nbsp;</p>
<p id="cad3a">&nbsp;</p>
<p id="cad4">&nbsp;</p>
<p id="cad4a">&nbsp;</p>
<p id="cad5">&nbsp;</p>
<p id="cad5a">&nbsp;</p>
<p id="cad6">&nbsp;</p>
<p id="cad6a">&nbsp;</p>
<p id="cad7">&nbsp;</p>
</div>
<style><!--
#cad1{position:absolute; z-index:1; width:33.75vw; height:33.75vw; background:url('http://ekladata.com/UvTVJCNJLG3PDNpdbgVQpnewNCg.jpg'); background-size:60vw 33.75vw; background-position:-13vw 0vw; transform:translate(13vw,0vw); transition:all 1s linear;}
#cad1a{position:absolute; z-index:1; width:30.75vw; height:30.75vw; background:white; transform:translate(14.5vw,1.5vw); transition:all 1s linear;}
#cad2{position:absolute; z-index:1; width:28.75vw; height:28.75vw; background:url('http://ekladata.com/JTKzcSsj0j_y_cA0Gkgb1rfhG4o.jpg'); background-size:60vw 33.75vw; background-position:-15.5vw -2.5vw; transform:translate(15.5vw,2.5vw);transition:all 1s linear;}
#cad2a{position:absolute; z-index:1; width:25.75vw; height:25.75vw; background:white; transform:translate(17vw,4vw); transition:all 1s linear;}
#cad3{position:absolute; z-index:1; width:23.75vw; height:23.75vw; background:url('http://ekladata.com/CuZh7EQFT1ZStr3YlGAcuym1aPs.jpg'); background-size:60vw 33.75vw; background-position:-18vw -5vw; transform:translate(18vw,5vw);transition:all 1s linear;}
#cad3a{position:absolute; z-index:1; width:20.75vw; height:20.75vw; background:white; transform:translate(19.5vw,6.5vw); transition:all 1s linear;}
#cad4{position:absolute; z-index:1; width:18.75vw; height:18.75vw; background:url('http://ekladata.com/FLCVb-6GcGxTmhdSk18zQfThfNs.jpg'); background-size:60vw 33.75vw; background-position:-20.5vw -7.5vw; transform:translate(20.5vw,7.5vw);transition:all 1s linear;}
#cad4a{position:absolute; z-index:1; width:15.75vw; height:15.75vw; background:white; transform:translate(22vw,9vw); transition:all 1s linear;}
#cad5{position:absolute; z-index:1; width:13.75vw; height:13.75vw; background:url('http://ekladata.com/wZDRIW1YEzoUVU-7wEQQNvjua8g.jpg'); background-size:60vw 33.75vw; background-position:-23vw -10vw; transform:translate(23vw,10vw);transition:all 1s linear;}
#cad5a{position:absolute; z-index:1; width:10.75vw; height:10.75vw; background:white; transform:translate(24.5vw,11.5vw); transition:all 1s linear;}
#cad6{position:absolute; z-index:1; width:8.75vw; height:8.75vw; background:url('http://ekladata.com/S3sYk79DEObuXD-K-RW5twJXDbY.jpg'); background-size:60vw 33.75vw; background-position:-25.5vw -12.5vw; transform:translate(25.5vw,12.5vw);transition:all 1s linear;}
#cad6a{position:absolute; z-index:1; width:5.75vw; height:5.75vw; background:white; transform:translate(27vw,14vw); transition:all 1s linear;}
#cad7{position:absolute; z-index:1; width:3.75vw; height:3.75vw; background:url('http://ekladata.com/ABpqwQGjEhJX9LVyLKGV4vVo6qE.jpg'); background-size:60vw 33.75vw; background-position:-28vw -15vw; transform:translate(28vw,15vw);transition:all 1s linear;}
#cad1:active ~ #cad1a,#cad2:active ~ #cad2a,#cad3:active ~ #cad3a,#cad4:active ~ #cad4a,#cad5:active ~ #cad5a,#cad6:active ~ #cad6a{z-index:5; width:0vw; height:0vw; transform:translate(30vw,17vw);}
#cad1:active,#cad2:active,#cad3:active,#cad4:active,#cad5:active,#cad6:active,#cad7:active{ z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
--></style>