Montage 90b

On peut distribuer les vignettes d'une autre façon.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; margin: 1vh auto; background: url('http://ekladata.com/Ago9OMTrSJef_EZS9C_piopSZNk.jpg'); background-size: cover;">
<p id="s0a">Survol</p>
<p id="s1a">&nbsp;</p>
<p id="s2a">&nbsp;</p>
<p id="s3a">&nbsp;</p>
<p id="s4a">&nbsp;</p>
<p id="s5a">&nbsp;</p>
<p id="s6a">&nbsp;</p>
<p id="s7a">&nbsp;</p>
<p id="s8a">&nbsp;</p>
<p id="s9a">&nbsp;</p>
<p id="s10a">&nbsp;</p>
</div>
<style><!--
#s0a{position:absolute; z-index:1; width:8vw; transform:translate(26vw,1vh); background:rgba(0,0,0,0.6); text-align:center; line-height:2vw; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
#s1a{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:4vw; height:6.75vw; background:url('http://ekladata.com/sG3EgHTPYx5RQgZEkinVn3JruEc.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);transition:all 1s linear;}
#s2a{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:3vw; height:6.75vw; background:url('http://ekladata.com/PmtAX6lVn8cq9vgrFAmm5fEUDvY.jpg'); background-size:60vw 33.75vw; background-position:0vw -6.75vw; transform:translate(0vw,6.75vw);transition:all 1s linear;}
#s3a{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:2vw; height:6.75vw; background:url('http://ekladata.com/wZAqc_ixyChA7q0oK7wmUYErTQI.jpg'); background-size:60vw 33.75vw; background-position:0vw -13.5vw; transform:translate(0vw,13.5vw);transition:all 1s linear;}
#s4a{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:3vw; height:6.75vw; background:url('http://ekladata.com/V-rPziDf-u-jBsorCiDZnB8O-88.jpg'); background-size:60vw 33.75vw; background-position:0vw -20.25vw; transform:translate(0vw,20.25vw);transition:all 1s linear;}
#s5a{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:4vw; height:6.75vw; background:url('http://ekladata.com/f30CNgMs4ysU1TQv-VxhXwIc_5c.jpg'); background-size:60vw 33.75vw; background-position:0vw -27vw; transform:translate(0vw,27vw);transition:all 1s linear;}
#s6a{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:4vw; height:6.75vw; background:url('http://ekladata.com/uCz0snGr_op6oAZP-U8shUTY9ng.jpg'); background-size:60vw 33.75vw; background-position:-56vw 0vw; transform:translate(56vw,0vw);transition:all 1s linear;}
#s7a{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:3vw; height:6.75vw; background:url('http://ekladata.com/tN_kPrHa4Xi4MT6t2Jtr2TG_hYw.jpg'); background-size:60vw 33.75vw; background-position:-57vw -6.75vw; transform:translate(57vw,6.75vw);transition:all 1s linear;}
#s8aposition:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:2vw; height:6.75vw; background:url('http://ekladata.com/BJRaQQiRyihkXG3AknMgXnOml5Y.jpg'); background-size:60vw 33.75vw; background-position:-58vw -13.5vw; transform:translate(58vw,13.5vw);transition:all 1s linear;}
#s9a{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:3vw; height:6.75vw; background:url('http://ekladata.com/9daFuKsOPQx19R9MRcjkYYFk4xU.jpg'); background-size:60vw 33.75vw;
background-position:-57vw -20.25vw; transform:translate(57vw,20.25vw);transition:all 1s linear;}
#s10a{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:4vw; height:6.75vw; background:url('http://ekladata.com/gaZBx7o3G91nxEYcd2NkM8TJDQg.jpg'); background-size:60vw 33.75vw; background-position:-56vw -27vw; transform:translate(56vw,27vw);transition:all 1s linear;}
#s1a:hover,#s2a:hover,#s3a:hover,#s4a:hover,#s5a:hover,#s6a:hover,#s7a:hover,#s8a:hover,#s9a:hover,#s10a:hover{z-index:5; width:60vw; height:33.75vw; border:none; transform:translate(0vw,0vw); background-position:0vw 0vw;}
--></style>