Rideau horizontal

Clic maintenu sur chaque tranche.

<div id="sol0">
<p id="mq1" class="mq">&nbsp;</p>
<p id="mq2" class="mq">&nbsp;</p>
<p id="mq3" class="mq">&nbsp;</p>
<p id="mq4" class="mq">&nbsp;</p>
<p id="mq5" class="mq">&nbsp;</p>
<p id="mq6" class="mq">&nbsp;</p>
<p id="mq7" class="mq">&nbsp;</p>
<p id="mq8" class="mq">&nbsp;</p>
<p id="mq9" class="mq">&nbsp;</p>
<p id="img1" class="im">&nbsp;</p>
<p id="img2" class="im">&nbsp;</p>
<p id="img3" class="im">&nbsp;</p>
<p id="img4" class="im">&nbsp;</p>
<p id="img5" class="im">&nbsp;</p>
<p id="img6" class="im">&nbsp;</p>
<p id="img7" class="im">&nbsp;</p>
<p id="img8" class="im">&nbsp;</p>
<p id="img9" class="im">&nbsp;</p>
</div>

<style><!--
#sol0{position:relative; overflow:hidden; width:60vw; height:33.75vw; border:0.4vh ridge white; margin:1vh auto;}
.mq{position:absolute; z-index:10; width:60vw; height:3.75vw;}
#mq1{transform:translate(0vw,0vw);}
#mq2{transform:translate(0vw,3.75vw);}
#mq3{transform:translate(0vw,7.5vw);}
#mq4{transform:translate(0vw,11.25vw);}
#mq5{transform:translate(0vw,15vw);}
#mq6{transform:translate(0vw,18.75vw);}
#mq7{transform:translate(0vw,22.5vw);}
#mq8{transform:translate(0vw,25.25vw);}
#mq9{transform:translate(0vw,30vw);}

.im{position:absolute; z-index:1; width:60vw; height:3.75vw; border:0.2vw solid white; transition:all 1s linear;}
#img1{transform:translate(0vw,0vw); background:url('http://ekladata.com/VUTNYRq-WibywyN8GSjmrv9_WXA.jpg'); background-size:60vw 45vw; background-position:0vw 0vw; box-sizing:border-box;}
#img2{transform:translate(0vw,3.75vw); background:url('http://ekladata.com/KnOmKG-4DXVim1lrDHhvMDlqzzg.jpg'); background-size:60vw 33.75vw; background-position:0vw -3.75vw; box-sizing:border-box;}
#img3{transform:translate(0vw,7.5vw); background:url('http://ekladata.com/tzgnr6GPDB9ZRVfPVl-1-L7BR4A.jpg'); background-size:60vw 33.75vw; background-position:0vw -7.5vw; box-sizing:border-box;}
#img4{transform:translate(0vw,11.25vw); background:url('http://ekladata.com/acYNk5FbbB3oW1Rxz4bVPWw-E2w.jpg'); background-size:60vw 33.75vw; background-position:0vw -11.25vw; box-sizing:border-box;}
#img5{transform:translate(0vw,15vw); background:url('http://ekladata.com/ZR71sRhb4mr8MsBbaY7MCMYMX5U.jpg'); background-size:60vw 33.75vw; background-position:0vw -15vw; box-sizing:border-box;}
#img6{transform:translate(0vw,18.75vw); background:url('http://ekladata.com/RPIyrHq2ZGDLqeDdIW0tKrr1TX0.jpg'); background-size:60vw 33.75vw; background-position:0vw -18.75vw; box-sizing:border-box;}
#img7{transform:translate(0vw,22.5vw); background:url('http://ekladata.com/18DpJ7GlTLMyx9H_doMRcOssOyc.jpg'); background-size:60vw 33.75vw; background-position:0vw -22.5vw; box-sizing:border-box;}
#img8{transform:translate(0vw,26.25vw); background:url('http://ekladata.com/44mc-PlaxWm03qr6JZAx58MLiO8.jpg'); background-size:60vw 33.75vw; background-position:0vw -26.25vw; box-sizing:border-box;}
#img9{transform:translate(0vw,30vw); background:url('http://ekladata.com/HrHO6MOoFb_mkhV6TelrcBRRDTg.jpg'); background-size:60vw 33.75vw; background-position:0vw -30vw; box-sizing:border-box;}
#mq1:active ~ #img1,#mq2:active ~ #img2,#mq3:active ~ #img3,#mq4:active ~ #img4,#mq5:active ~ #img5,#mq6:active ~ #img6,#mq7:active ~ #img7,#mq8:active ~ #img8,#mq9:active ~ #img9{width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
#mq1:active ~ #img2,#mq1:active ~ #img3,#mq1:active ~ #img4,#mq1:active ~ #img5,#mq1:active ~ #img6,#mq1:active ~ #img7,#mq1:active ~ #img8,#mq1:active ~ #img9{transform:translate(0vw,33.75vw);}
#mq2:active ~ #img3,#mq2:active ~ #img4,#mq2:active ~ #img5,#mq2:active ~ #img6,#mq2:active ~ #img7,#mq2:active ~ #img8,#mq2:active ~ #img9{transform:translate(0vw,33.75vw);}
#mq3:active ~ #img4,#mq3:active ~ #img5,#mq3:active ~ #img6,#mq3:active ~ #img7,#mq3:active ~ #img8,#mq3:active ~ #img9{transform:translate(0vw,33.75vw);}
#mq4:active ~ #img5,#mq4:active ~ #img6,#mq4:active ~ #img7,#mq4:active ~ #img8,#mq4:active ~ #img9{transform:translate(0vw,33.75vw);}
#mq5:active ~ #img6,#mq5:active ~ #img7,#mq5:active ~ #img8,#mq5:active ~ #img9{transform:translate(0vw,33.75vw);}
#mq6:active ~ #img7,#mq6:active ~ #img8,#mq6:active ~ #img9{transform:translate(0vw,33.75vw);}
#mq7:active ~ #img8,#mq7:active ~ #img9{transform:translate(0vw,33.75vw);}
#mq8:active ~ #img9{transform:translate(0vw,33.75vw);}

#mq2:active ~ #img1{transform:translate(0vw,-3.75vw);}
#mq3:active ~ #img1,#mq3:active ~ #img2{transform:translate(0vw,-3.75vw);}
#mq4:active ~ #img1,#mq4:active ~ #img2,#mq4:active ~ #img3{transform:translate(0vw,-3.75vw);}
#mq5:active ~ #img1,#mq5:active ~ #img2,#mq5:active ~ #img3,#mq5:active ~ #img4{transform:translate(0vw,-3.75vw);}
#mq6:active ~ #img1,#mq6:active ~ #img2,#mq6:active ~ #img3,#mq6:active ~ #img4,#mq6:active ~ #img5{transform:translate(0vw,-3.75vw);}
#mq7:active ~ #img1,#mq7:active ~ #img2,#mq7:active ~ #img3,#mq7:active ~ #img4,#mq7:active ~ #img5,#mq7:active ~ #img6{transform:translate(0vw,-3.75vw);}
#mq8:active ~ #img1,#mq8:active ~ #img2,#mq8:active ~ #img3,#mq8:active ~ #img4,#mq8:active ~ #img5,#mq8:active ~ #img6,#mq8:active ~ #img7{transform:translate(0vw,-3.75vw);}
#mq9:active ~ #img1,#mq9:active ~ #img2,#mq9:active ~ #img3,#mq9:active ~ #img4,#mq9:active ~ #img5,#mq9:active ~ #img6,#mq9:active ~ #img7,#mq9:active ~ #img8{transform:translate(0vw,-3.75vw);}
--></style>