Rideau

Clic maintenu sur chaque section d'image.

<div id="dep0">
<div id="dep1">
<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="dep2" class="dp">&nbsp;</p>
<p id="dep3" class="dp">&nbsp;</p>
<p id="dep4" class="dp">&nbsp;</p>
<p id="dep5" class="dp">&nbsp;</p>
<p id="dep6" class="dp">&nbsp;</p>
<p id="dep7" class="dp">&nbsp;</p>
</div>
</div>

<style><!--
#dep0{position:relative;width:60vw; height:33.75vw; border:0.2vh solid grey; margin:1vh auto; overflow:hidden;}
#dep1{width:60vw; height:33.75vw;}
.mq{position:absolute;z-index:10; width:10vw; height:33.75vw;}
#mq2{transform:translate(0vw,0vw);}
#mq3{transform:translate(10vw,0vw);}
#mq4{transform:translate(20vw,0vw);}
#mq5{transform:translate(30vw,0vw);}
#mq6{transform:translate(40vw,0vw);}
#mq7{transform:translate(50vw,0vw);}
.dp{position:absolute; width:10vw; height:33.75vw; border:0.2vw solid white; transition:all 1s linear;}
#dep2{background:url('http://ekladata.com/RJgLMTYVGUNk4kb8iIVxJajbYMw.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; box-sizing:border-box; transform:translate(0vw,0vw);}
#dep3{background:url('http://ekladata.com/N4nWsM1AlMqlO8lhYw1LTOi6uvo.jpg'); background-size:60vw 33.75vw; background-position:-10vw 0vw; box-sizing:border-box; transform:translate(10vw,0vw);}
#dep4{background:url('http://ekladata.com/rsxEIb28KvYqMB7caT9HttBdArE.jpg'); background-size:60vw 33.75vw; background-position:-20vw 0vw; box-sizing:border-box; transform:translate(20vw,0vw);}
#dep5{background:url('http://ekladata.com/LCqJDPhVjLHjzNWykrLQ5SZfG7I.jpg'); background-size:60vw 33.75vw; background-position:-30vw 0vw; box-sizing:border-box; transform:translate(30vw,0vw);}
#dep6{background:url('http://ekladata.com/WiLJH8kZZx7KjnRjv7DXdYMKk70.jpg'); background-size:60vw 33.75vw; background-position:-40vw 0vw; box-sizing:border-box; transform:translate(40vw,0vw);}
#dep7{background:url('http://ekladata.com/21rq7FtITnbmEZG_LPv9ojb_x3k.jpg'); background-size:60vw 33.75vw; background-position:-50vw 0vw; box-sizing:border-box; transform:translate(50vw,0vw);}

#mq2:active ~ #dep2,#mq3:active ~ #dep3,#mq4:active ~ #dep4,#mq5:active ~ #dep5,#mq6:active ~ #dep6,#mq7:active ~ #dep7{width:60vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
#mq2:active ~ #dep3,#mq2:active ~ #dep4,#mq2:active ~ #dep5,#mq2:active ~ #dep6,#mq2:active ~ #dep7{transform:translate(60vw,0vw);}
#mq3:active ~ #dep4,#mq3:active ~ #dep5,#mq3:active ~ #dep6,#mq3:active ~ #dep7{transform:translate(60vw,0vw);}
#mq4:active ~ #dep5,#mq4:active ~ #dep6,#mq4:active ~ #dep7{transform:translate(60vw,0vw);}
#mq5:active ~ #dep6,#mq5:active ~ #dep7{transform:translate(60vw,0vw);}
#mq6:active ~ #dep7{transform:translate(60vw,0vw);}
#mq3:active ~ #dep2{transform:translate(-10vw,0vw);}
#mq4:active ~ #dep2,#mq4:active ~ #dep3{transform:translate(-10vw,0vw);}
#mq5:active ~ #dep2,#mq5:active ~ #dep3,#mq5:active ~ #dep4{transform:translate(-10vw,0vw);}
#mq6:active ~ #dep2,#mq6:active ~ #dep3,#mq6:active ~ #dep4,#mq6:active ~ #dep5{transform:translate(-10vw,0vw);}
#mq7:active ~ #dep2,#mq7:active ~ #dep3,#mq7:active ~ #dep4,#mq7:active ~ #dep5,#mq7:active ~ #dep6{transform:translate(-10vw,0vw);}
--></style>