Montage 260

 1 + 6 images au ratio 16/9.

<div style="position: relative; width: 1000px; height: 563px; margin: 5px auto; background: url('http://ekladata.com/7NmqJr4YenGyeQ74c2f4A4k_5SM.jpg'); background-size: cover; border: 6px ridge grey; text-align: left; overflow: hidden;"><input id="org" type="text" value="Clic ici puis survol vignettes" /> <img id="fg1" class="fg" src="http://ekladata.com/A1berfkOhTI2gvmBNrtYvyso6lI.jpg" alt="" /> <img id="fg2" class="fg" src="http://ekladata.com/EdtNTXuSdy_bVTjUgfM5Ba0QzsI.jpg" alt="" /> <img id="fg3" class="fg" src="http://ekladata.com/Nf4ndnGMYuNkxfU2lANpHfN7cdI.jpg" alt="" /> <img id="fg4" class="fg" src="http://ekladata.com/L5e4m9X6qCv38CWGYqB354dgJv8.jpg" alt="" /> <img id="fg5" class="fg" src="http://ekladata.com/iXkhl1fErotTLfU6oXAzmwLMnhQ.jpg" alt="" /> <img id="fg6" class="fg" src="http://ekladata.com/orT-wkChnkcrCpLSDEY11Sl-PHM.jpg" alt="" /></div>
<style><!--
#org{position:absolute; z-index:1; width:320px; height:30px; line-height:30px; text-align:left; font-size:25px; color:white; text-shadow:1px 1px black; background:rgba(100,100,0,0.5); transform:translate(350px,0px);}
.fg{position:absolute; z-index:1; width:140px; height:400px; border:4px solid white; transition:all 1s linear;}
#fg1,#fg2,#fg3{box-sizing:border-box; transform:translate(-200px,80px);}
#fg4,#fg5,#fg6{box-sizing:border-box; transform:translate(1200px,80px);}
#org:focus ~ #fg1{transform:translate(20px,80px);}
#org:focus ~ #fg2{transform:translate(185px,80px);}
#org:focus ~ #fg3{transform:translate(350px,80px);}
#org:focus ~ #fg4{transform:translate(840px,80px);}
#org:focus ~ #fg5{transform:translate(675px,80px);}
#org:focus ~ #fg6{transform:translate(510px,80px);}
#fg1:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px); margin:-80px 0 0 -20px;}
#fg2:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px); margin:-80px 0 0 -185px;}
#fg3:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px); margin:-80px 0 0 -350px;}
#fg4:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px); margin:-80px 0 0 -840px;}
#fg5:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px); margin:-80px 0 0 -675px;}
#fg6:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px); margin:-80px 0 0 -510px;}
--></style>