Exemple 144

Sur le même principe entre Survol et Clic, deux versions du même montage; commençons par le survol. (hover)

1+6 images au ratio 16/9

<div style="position:relative;width:60vw; height:33.75vw; margin:1vh auto; border:0.1vh solid black; text-align:left; overflow:hidden;">
<input id="ouv1" class="ouv" type="text">
<input id="ouv2" class="ouv" type="text">
<input id="ouv3" class="ouv" type="text">
<input id="ouv4" class="ouv" type="text">
<input id="ouv5" class="ouv" type="text">
<input id="ouv6" class="ouv" type="text">
<p id="ridg" class="rid">&nbsp;</p>
<p id="ridd" class="rid">&nbsp;</p>
<p id="fd1" class="fd">&nbsp;</p>
<p id="fd2" class="fd">&nbsp;</p>
<p id="fd3" class="fd">&nbsp;</p>
<p id="fd4" class="fd">&nbsp;</p>
<p id="fd5" class="fd">&nbsp;</p>
<p id="fd6" class="fd">&nbsp;</p>
</div>

<style><!--
.ouv{position:absolute; z-index:10; width:1.5vw; height:1.5vw; border-radius:50%; border:none; background:coral; box-shadow:inset -0.4vh -0.4vh 0.6vh black;}
.ouv:hover{background:lime;}
#ouv1{transform:translate(57vw,2vw);}
#ouv2{transform:translate(57vw,4vw);}
#ouv3{transform:translate(57vw,6vw);}
#ouv4{transform:translate(57vw,8vw);}
#ouv5{transform:translate(57vw,10vw);}
#ouv6{transform:translate(57vw,12vw);}
.rid{position:absolute; z-index:5; width:30vw; height:33.75vw; background:url('http://ekladata.com/G7OhInvMTChv0iModdQSfceCy_k.jpg'); background-size:60vw 33.75vw; transition:all 1s linear;}
#ridg{background-position:0vw 0vw; transform:translate(0vw,0vw);}
#ridd{background-position:-30vw 0vw; transform:translate(30vw,0vw);}
.fd{position:absolute; z-index:1; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
#fd1{background:url('http://ekladata.com/SLyV5SsLgJ6li_qVAQaGsJZu5tY.jpg');background-size:60vw 33.75vw;}
#fd2{background:url('http://ekladata.com/DlXJXgyDztsIF9Smc1_vPzU-2ho.jpg');background-size:60vw 33.75vw;}
#fd3{background:url('http://ekladata.com/SEMhEVq50il_5O2JIgSDbrAWLZU.jpg');background-size:60vw 33.75vw;}
#fd4{background:url('http://ekladata.com/rkTOL9cbv71jmCr3SmI7z5xY_Nw.jpg');background-size:60vw 33.75vw;}
#fd5{background:url('http://ekladata.com/a-fl0CdDN_0trdsjucsPQcUPmrE.jpg');background-size:60vw 33.75vw;}
#fd6{background:url('http://ekladata.com/JlxnyA4bgsjesEViCXT8KK_oaV0.jpg');background-size:60vw 33.75vw;}
#ouv1:hover ~ #ridg, #ouv2:hover ~ #ridg,#ouv3:hover ~ #ridg, #ouv4:hover ~ #ridg,#ouv5:hover ~ #ridg, #ouv6:hover ~ #ridg{transform:translate(-30vw,0vw);}
#ouv1:hover ~ #ridd, #ouv2:hover ~ #ridd,#ouv3:hover ~ #ridd, #ouv4:hover ~ #ridd,#ouv5:hover ~ #ridd, #ouv6:hover ~ #ridd{transform:translate(60vw,0vw);}
#ouv1:hover ~ #fd1,#ouv2:hover ~ #fd2, #ouv3:hover ~ #fd3,#ouv4:hover ~ #fd4,#ouv5:hover ~ #fd5,#ouv6:hover ~ #fd6{z-index:3;}
--></style>