Exemple 38

6 images au ratio 16/9, redimensionnées par le code, que vous pouvez disposer à votre convenance.

<div style="width:60vw; height:21vw; margin:1vh auto; text-align:left; ">
<input id="prt1" class="prt" type="image" src="http://ekladata.com/DQd3PR3oY2iYgx7U3oSX86BCRXA@307x173.jpg">
<img id="ecr1" class="ecr" src="http://ekladata.com/DQd3PR3oY2iYgx7U3oSX86BCRXA.jpg">
<input id="prt2" class="prt" type="image" src="http://ekladata.com/MQcJ6OOEyYDSjttXsF7XyhLOzjM@307x173.jpg">
<img id="ecr2" class="ecr" src="http://ekladata.com/MQcJ6OOEyYDSjttXsF7XyhLOzjM.jpg">
<input id="prt3" class="prt" type="image" src="http://ekladata.com/S1ZtVa9mLF8PTMzfq0dvl9ChFH0@307x173.jpg">
<img id="ecr3" class="ecr" src="http://ekladata.com/S1ZtVa9mLF8PTMzfq0dvl9ChFH0.jpg">
<input id="prt4" class="prt" type="image" src="http://ekladata.com/6AWef4QpXXfJV-nPFcHERdZejak@307x173.jpg">
<img id="ecr4" class="ecr" src="http://ekladata.com/6AWef4QpXXfJV-nPFcHERdZejak.jpg">
<input id="prt5" class="prt" type="image" src="http://ekladata.com/F8sv5igroMciCgu_OIf4LC4CCFY@307x173.jpg">
<img id="ecr5" class="ecr" src="http://ekladata.com/F8sv5igroMciCgu_OIf4LC4CCFY.jpg">
<input id="prt6" class="prt" type="image" src="http://ekladata.com/ol1tlVbQsETPSOvIiup7ZG_0ebk@307x173.jpg">
<img id="ecr6" class="ecr" src="http://ekladata.com/ol1tlVbQsETPSOvIiup7ZG_0ebk.jpg">
</div>
<style><!--
.prt{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black;}
#prt1{transform:translate(0vw,0vw);}
#prt2{transform:translate(19vw,0vw);}
#prt3{transform:translate(38vw,0vw);}
#prt4{transform:translate(0vw,11vw);}
#prt5{transform:translate(19vw,11vw);}
#prt6{transform:translate(38vw,11vw);}
.ecr{position:absolute; z-index:100; width:100vw; height:0vw; top:0vw; left:0vw; transition:all 1s linear;}
#prt1:focus ~ #ecr1,#prt2:focus ~ #ecr2,#prt3:focus ~ #ecr3,#prt4:focus ~ #ecr4,#prt5:focus ~ #ecr5,#prt6:focus ~ #ecr6{height:56.25vw;}
--></style>