Exemple 147

Une autre série, que l'on pourrait décliner en survol et en clic mais, vous connaissez maintenant.

1+4 images au ratio 16/9

<div style="position: relative; width: 60vw; height: 33.75vw; border: 0.1vw solid grey; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/CGggmYhpzzFyGJ26Ce35za-n2So.jpg'); background-size: cover; overflow: hidden;">
<p id="mt1a">&nbsp;</p>
<p id="mt1b">&nbsp;</p>
<p id="gm0">Survol</p>
<p id="gm1" class="gm">&nbsp;</p>
<p id="gm2" class="gm">&nbsp;</p>
<p id="gm3" class="gm">&nbsp;</p>
<p id="gm4" class="gm">&nbsp;</p>
</div>

<style><!--
#mt1a{position:absolute; z-index:1; width:24vw; height:23.5vw; border:0.1vw solid black; background:rgba(255,255,255,0.5);transform:translate(-12vw,5vw) rotate(45.7deg);}
#mt1b{position:absolute; z-index:1; width:24vw; height:23.5vw; border:0.1vw solid black; background:rgba(255,255,255,0.5);transform:translate(48vw,5vw) rotate(45.7deg);}
#gm0{position:absolute; z-index:1; width:8vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(26vw,1vw);}
.gm{position:absolute; z-index:2; width:60vw; height:33.75vw; transition:all 1s linear;}
#gm1{ background:url('http://ekladata.com/K9w9v6x3N3PUm0RNjJ6M3JpvY5c.jpg'); background-size:cover; clip-path: polygon(1vw 2vw, 1vw 15vw, 1vw 15vw, 13vw 15vw);}
#gm2{ background:url('http://ekladata.com/gRpOE45muITBFqWXWuB-eUyrO7A.jpg'); background-size:cover; clip-path: polygon(1vw 19vw, 1vw 31vw, 1vw 31vw, 13vw 19vw);}
#gm3{ background:url('http://ekladata.com/9eoKzBYdR1UAZJNWfsSdVz4ppYg.jpg'); background-size:cover; clip-path: polygon(47vw 15vw, 47vw 15vw, 59vw 15vw, 59vw 1.5vw);}
#gm4{ background:url('http://ekladata.com/TNwxUwspsPRhiuuJtujwbeo3J3A.jpg'); background-size:cover; clip-path: polygon(47vw 19vw, 59vw 31.5vw, 59vw 31.5vw, 59vw 19vw);}
#gm1:hover,#gm2:hover,#gm3:hover,#gm4:hover{z-index:5; clip-path: polygon(0vw 0vw, 0vw 33.75vw, 60vw 33.75vw, 60vw 0vw);}
--></style>