Montage 115

Principe déjà proposé; 9 + 1 images au ratio 16/9 horizontales.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left; background: url('http://ekladata.com/7Yf13mMrBLdTisIQuHw75iDYsa8.jpg'); background-size: cover;"><input id="cde1" class="cde" type="text" value="Clic1" /><input id="cde2" class="cde" type="text" value="Clic2" /><input id="cde3" class="cde" type="text" value="Clic3" />
<p id="xp">Clic puis survol vignettes.</p>
<p id="mg1cd1" class="mg">&nbsp;</p>
<p id="mg2cd1" class="mg">&nbsp;</p>
<p id="mg3cd1" class="mg">&nbsp;</p>
<p id="mg1cd2" class="mg">&nbsp;</p>
<p id="mg2cd2" class="mg">&nbsp;</p>
<p id="mg3cd2" class="mg">&nbsp;</p>
<p id="mg1cd3" class="mg">&nbsp;</p>
<p id="mg2cd3" class="mg">&nbsp;</p>
<p id="mg3cd3" class="mg">&nbsp;</p>
</div>

<style><!--
#xp{position:absolute; z-index:1; width:20vw; text-align:center; font-size:1.2vw; transform:translate(20vw,0vw); color:white; text-shadow:0.1vh 0.1vh black;}
.cde{position:absolute; z-index:5; width:8vw; height:4.5vw; border:none; text-align:center; line-height:4.5vw; text-align:center; font-size:2vw; color:white!important; text-shadow:0.1vh 0.1vh black; box-shadow:inset 0.4vh 0.4vh 0.6vh black,inset -0.4vh -0.4vh 0.6vh white; background:aqua;}
#cde1{transform:translate(5vw,5vw);}
#cde2{transform:translate(25vw,5vw);}
#cde3{transform:translate(45vw,5vw);}
.mg{position:absolute; z-index:1;width:8vw; height:4.5vw; border:0.4vh solid white; transition:all 1s linear;}
#mg1cd1{box-sizing:border-box; background:url('http://ekladata.com/nB60TrDl1izSYzRFQqYNSPPsLIs.jpg'); background-size:cover; transform:translate(5vw,5vw);}
#mg2cd1{box-sizing:border-box; background:url('http://ekladata.com/qHGsQUH0igX6jdYds-6QMryXKT8.jpg'); background-size:cover; transform:translate(5vw,5vw);}
#mg3cd1{box-sizing:border-box; background:url('http://ekladata.com/OYt56NW8C7T1CjoIPg6FPkEPkB4.jpg'); background-size:cover; transform:translate(5vw,5vw);}
#mg1cd2{box-sizing:border-box; background:url('http://ekladata.com/cDEqV5msvjpXhWKkTWw7iPN5GNo.jpg'); background-size:cover; transform:translate(25vw,5vw);}
#mg2cd2{box-sizing:border-box; background:url('http://ekladata.com/pB4LLpmrHiqPW7JkIlQ1jUi-Tgs.jpg'); background-size:cover; transform:translate(25vw,5vw);}
#mg3cd2{box-sizing:border-box; background:url('http://ekladata.com/LgboCTT_hlbpg337DZfRSbHzNjU.jpg'); background-size:cover; transform:translate(25vw,5vw);}
#mg1cd3{box-sizing:border-box; background:url('http://ekladata.com/oBwYUrhPXtUlhShAilmK-2Zr77M.jpg'); background-size:cover; transform:translate(45vw,5vw);}
#mg2cd3{box-sizing:border-box; background:url('http://ekladata.com/zTILGyG5sR8HwTdnwOFrl2JCPcU.jpg'); background-size:cover; transform:translate(45vw,5vw);}
#mg3cd3{box-sizing:border-box; background:url('http://ekladata.com/-W6RcM-rdXZKGE26VwwgkJj5NVQ.jpg'); background-size:cover; transform:translate(45vw,5vw);}
#cde1:focus ~ #mg1cd1{transform:translate(5vw,12vw);}
#cde1:focus ~ #mg2cd1{transform:translate(5vw,19vw);}
#cde1:focus ~ #mg3cd1{transform:translate(5vw,26vw);}
#cde2:focus ~ #mg1cd2{transform:translate(25vw,12vw);}
#cde2:focus ~ #mg2cd2{transform:translate(25vw,19vw);}
#cde2:focus ~ #mg3cd2{transform:translate(25vw,26vw);}
#cde3:focus ~ #mg1cd3{transform:translate(45vw,12vw);}
#cde3:focus ~ #mg2cd3{transform:translate(45vw,19vw);}
#cde3:focus ~ #mg3cd3{transform:translate(45vw,26vw);}
#cde1:focus ~ #mg1cd1:hover,#cde1:focus ~ #mg2cd1:hover,#cde1:focus ~ #mg3cd1:hover{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
#cde2:focus ~ #mg1cd2:hover,#cde2:focus ~ #mg2cd2:hover,#cde2:focus ~ #mg3cd2:hover{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
#cde3:focus ~ #mg1cd3:hover,#cde3:focus ~ #mg2cd3:hover,#cde3:focus ~ #mg3cd3:hover{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
--></style>