Exemple 113

8 images au ratio 16/9

<div style="position: relative; width: 60vw; height: 34vw; margin: 1vh auto;text-align: left; overflow: hidden;">
<p id="lor0">Survol</p>
<p id="lor1" class="lor">&nbsp;</p>
<p id="lor2" class="lor">&nbsp;</p>
<p id="lor3" class="lor">&nbsp;</p>
<p id="lor4" class="lor">&nbsp;</p>
<p id="lor5" class="lor">&nbsp;</p>
<p id="lor6" class="lor">&nbsp;</p>
<p id="lor7" class="lor">&nbsp;</p>
<p id="lor8" class="lor">&nbsp;</p>
</div>

<style><!--
#lor0{position:absolute; z-index:1; width:10vw; font-size:2vw; transform:translate(25vw,0vw);}
.lor{position:absolute; z-index:1; border-radius:50%; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; filter:sepia(1); transition:all 1s linear, filter 1s linear 1s;}
#lor1{box-sizing:border-box; width:60vw; height:34vw; background:url('http://ekladata.com/3B8Vd0WabxuNFdixs6DxDINY0bg.jpg'); background-size:60vw 34vw; background-position:35vw -0vw; transform:translate(-35vw,0vw); ;}
#lor2{box-sizing:border-box; width:50vw; height:28vw; background:url('http://ekladata.com/gZ6309NqFuzj5xyFtU6CxflLFGc.jpg'); background-size:60vw 34vw; background-position:30vw -3vw; transform:translate(-30vw,3vw); ;}
#lor3{box-sizing:border-box; width:40vw; height:22vw; background:url('http://ekladata.com/X8cSzKySP8FXGLah_YaQIbLZ_1M.jpg'); background-size:60vw 34vw; background-position:25vw -6vw; transform:translate(-25vw,6vw); ;}
#lor4{box-sizing:border-box; width:30vw; height:16vw; background:url('http://ekladata.com/N1xhC9zAnj3s59blaHiI6PNo9zQ.jpg'); background-size:60vw 34vw; background-position:20vw -9vw; transform:translate(-20vw,9vw); ;}
#lor5{box-sizing:border-box; width:60vw; height:34vw; background:url('http://ekladata.com/yAHTA2BmZGK-J3OF5jXlbAGMFCo.jpg'); background-size:60vw 34vw; background-position:-35vw -0vw; transform:translate(35vw,0vw); ;}
#lor6{box-sizing:border-box; width:50vw; height:28vw; background:url('http://ekladata.com/6prdZK89DqkdXBdHDJgwWBCiY6I.jpg'); background-size:60vw 34vw; background-position:-40vw -3vw; transform:translate(40vw,3vw); ;}
#lor7{box-sizing:border-box; width:40vw; height:22vw; background:url('http://ekladata.com/RjQpHn33IVrQwqF4b9v90RhoVu0.gif'); background-size:60vw 34vw; background-position:-45vw -6vw; transform:translate(45vw,6vw); ;}
#lor8{box-sizing:border-box; width:30vw; height:16vw; background:url('http://ekladata.com/wjPttMmecqRz8LBj20h-B9vW550.jpg'); background-size:60vw 34vw; background-position:-50vw -9vw; transform:translate(50vw,9vw); ;}

#lor1:hover,#lor2:hover,#lor3:hover,#lor4:hover,#lor5:hover,#lor6:hover,#lor7:hover,#lor8:hover{z-index:5; width:60vw; height:34vw; background-position:0vw 0vw; transform:translate(0vw,0vw); border-radius:0%; filter:sepia(0);}
--></style>