Exemple 48

 8 + 1 images au ratio 19/9 redimensionnées par le code en 1152x648px

<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left;">
<p id="prog1">&nbsp;</p>
<input id="cdde" type="text" value="clic" />
<p id="yz1" class="yz">&nbsp;</p>
<p id="yz2" class="yz">&nbsp;</p>
<p id="yz3" class="yz">&nbsp;</p>
<p id="yz4" class="yz">&nbsp;</p>
<p id="yz5" class="yz">&nbsp;</p>
<p id="yz6" class="yz">&nbsp;</p>
<p id="yz7" class="yz">&nbsp;</p>
<p id="yz8" class="yz">&nbsp;</p>
<p id="yui1" class="yui">&nbsp;</p>
<p id="yui2" class="yui">&nbsp;</p>
<p id="yui3" class="yui">&nbsp;</p>
<p id="yui4" class="yui">&nbsp;</p>
<p id="yui5" class="yui">&nbsp;</p>
<p id="yui6" class="yui">&nbsp;</p>
<p id="yui7" class="yui">&nbsp;</p>
<p id="yui8" class="yui">&nbsp;</p>
</div>

<style><!--
#prog1{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/NU4vevkjaurr7yJX0Q2eeUlS410@1152x648.jpg');}
#cdde{position:absolute; z-index:2; width:4vw; text-align:center; font-size:2vw; background:rgba(255,255,255,0.5); transform:translate(0vw,0vw);}
.yz{position:absolute; z-index:3; width:5vw;  height:0vw;  transition:all 1s linear;}
#yz1,#yui1{transform:translate(5vw,0vw);}
#yz2,#yui2{transform:translate(12vw,0vw);}
#yz3,#yui3{transform:translate(19vw,0vw);}
#yz4,#yui4{transform:translate(26vw,0vw);}
#yz5,#yui5{transform:translate(33vw,0vw);}
#yz6,#yui6{transform:translate(40vw,0vw);}
#yz7,#yui7{transform:translate(47vw,0vw);}
#yz8,#yui8{transform:translate(54vw,0vw);}
.yui{position:absolute; z-index:1; width:6vw; height:0vw; transition:all 1s linear;}
#yui1{background:url('http://ekladata.com/-hTvggyuxkUgNQgdG62o8Edwhlc@1152x648.jpg'); background-position:-5vw 0vw; background-size:60vw 33.75vw;}
#yui2{background:url('http://ekladata.com/Bel9tYIOo-zUyB2iIxusLZUUb1s@1152x648.jpg'); background-position:-12vw 0vw; background-size:60vw 33.75vw;}
#yui3{background:url('http://ekladata.com/sAtUOg081GuiNR5WUL67Mx_6K68@1152x648.jpg'); background-position:-19vw 0vw; background-size:60vw 33.75vw;}
#yui4{background:url('http://ekladata.com/UK0Ucjvx-PJz-Hmms6Xy2uMiIHk@1152x648.jpg'); background-position:-26vw 0vw; background-size:60vw 33.75vw;}
#yui5{background:url('http://ekladata.com/GKgDEbBU67_xbtlj-yMueRbvFxY@1152x648.jpg'); background-position:-33vw 0vw; background-size:60vw 33.75vw;}
#yui6{background:url('http://ekladata.com/xPNW1sV8LAuQSFrbXdpOIopgsog@1152x648.jpg'); background-position:-40vw 0vw; background-size:60vw 33.75vw;}
#yui7{background:url('http://ekladata.com/opMeHP-2wN64gzeesWr0x1ofWtY@1152x648.jpg'); background-position:-47vw 0vw; background-size:60vw 33.75vw;}
#yui8{background:url('http://ekladata.com/zF1b954KuJuZUsSqXZVzmh2_7VA@1152x648.jpg'); background-position:-54vw 0vw; background-size:60vw 33.75vw;}
#cdde:focus ~ #yui1,#cdde:focus ~ #yz1{height:10vw;}
#cdde:focus ~ #yui2,#cdde:focus ~ #yz2{height:5vw;}
#cdde:focus ~ #yui3,#cdde:focus ~ #yz3{height:15vw;}
#cdde:focus ~ #yui4,#cdde:focus ~ #yz4{height:25vw;}
#cdde:focus ~ #yui5,#cdde:focus ~ #yz5{height:10vw;}
#cdde:focus ~ #yui6,#cdde:focus ~ #yz6{height:20vw;}
#cdde:focus ~ #yui7,#cdde:focus ~ #yz7{height:5vw;}
#cdde:focus ~ #yui8,#cdde:focus ~ #yz8{height:12vw;}  
.yz:hover{z-index:10;}
#yz1:hover ~ #yui1,#yz2:hover ~ #yui2,#yz3:hover ~ #yui3,#yz4:hover ~ #yui4,#yz5:hover ~ #yui5,#yz6:hover ~ #yui6,#yz7:hover ~ #yui7,#yz8:hover ~ #yui8{ z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
--></style>