Exemple 21

10 images horizontales au ratio 16/9

<div style="width: 60vw; height: 33.75vw; border: 0.2vh solid grey; margin: 1vh auto; text-align: left; background: linear-gradient(135deg, #e9d4b3 0%,#bf9659 43%,#bf9659 54%,#e9d4b3 100%);">
<p id="sa0">Survol jusqu'&agrave; coloration</p>
<p id="sa1" class="sa">&nbsp;</p>
<p id="sa2" class="sa">&nbsp;</p>
<p id="sb3" class="sb">&nbsp;</p>
<p id="sb4" class="sb">&nbsp;</p>
<p id="sb5" class="sb">&nbsp;</p>
<p id="sb6" class="sb">&nbsp;</p>
<p id="sc7" class="sc">&nbsp;</p>
<p id="sc8" class="sc">&nbsp;</p>
<p id="sc9" class="sc">&nbsp;</p>
<p id="sc10" class="sc">&nbsp;</p>
</div>

<style><!--
#sa0{position:absolute; z-index:1; width:10vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
.sa{position:absolute; z-index:1; width:5vw; height:17vw; box-sizing:border-box; border:0.2vh solid grey; box-shadow:inset 0.4vh 0.4vh 0.8vh white, inset -0.4vh -0.4vh 0.6vh black; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
#sa1{transform:translate(0vw,8vw); background:url('http://ekladata.com/CGGkO_LBlmB2ggIPPfUK4HQToUQ@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw -8vw;}
#sa2{transform:translate(55vw,8vw); background:url('http://ekladata.com/-g6pyB0BxLifqQ8pRyh3LJbdRcI@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-55vw -8vw;}
.sb{position:absolute; z-index:1; width:15vw; height:5vw; box-sizing:border-box; border:0.2vh solid grey; box-shadow:inset 0.4vh 0.4vh 0.8vh white, inset -0.4vh -0.4vh 0.6vh black; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
#sb3{transform:translate(10vw,0vw); background:url('http://ekladata.com/zZUrt39rriRRf2QQ7bT3Sa1seCw@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-10vw 0vw;}
#sb4{transform:translate(35vw,0vw); background:url('http://ekladata.com/-ulquPPQFr7G2eyrX2QCDxB7zaI@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-35vw 0vw;}
#sb5{transform:translate(10vw,28.75vw); background:url('http://ekladata.com/yuGmsAHJ-2YDQlW4FQ0Ewj6zfFw@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-10vw -28.75vw;}
#sb6{transform:translate(35vw,28.75vw); background:url('http://ekladata.com/-80225NP0OgDcP7_P6HSIIObOVA@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-35vw -28.75vw;}
.sc{position:absolute; z-index:1; width:15vw; height:7vw; box-sizing:border-box; border:0.2vh solid grey; box-shadow:inset 0.4vh 0.4vh 0.8vh white, inset -0.4vh -0.4vh 0.6vh black; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
#sc7{transform:translate(10vw,8vw); background:url('http://ekladata.com/8_-PRK7TAvqcSIuBT4SxeCwUhl8@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-10vw -8vw;}
#sc8{transform:translate(35vw,8vw); background:url('http://ekladata.com/b4VS84VsWky7n9kiC8tl_J1bIb0@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-35vw -8vw;}
#sc9{transform:translate(10vw,18vw); background:url('http://ekladata.com/HYq3p0y8Ivwtrz5LY9y0uafmKhM@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-10vw -18vw;}
#sc10{transform:translate(35vw,18vw); background:url('http://ekladata.com/f_IrPmCVx3Yi2vHh2Ghc3GT3lhE@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-35vw -18vw;}
#sa1:hover,#sa2:hover,#sb3:hover,#sb4:hover,#sb5:hover,#sb6:hover,#sc7:hover,#sc8:hover,#sc9:hover,#sc10:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; filter:grayscale(0); transform:translate(0vw,0vw);}
--></style>