Sélection 1

Les images de fond peuvent être du votre format: le code les dimensionne en 80vw par 92vh automatiquement.

Les vignettes sont ici en rond mais on peut imaginer différentes formes et positions avec des transitions différentes.

Survolez les vignettes ombrées et bordées de blanc.

<div style="width: 80vw; height: 92vh; border: 0.2vh solid white; margin: 0vh auto; background: url('https://ekladata.com/U_Yn_hok4qhNsegabKBzfNV0QR4.jpg');">
<p id="az1" class="ay1">&nbsp;</p>
<p id="az2" class="ay1">&nbsp;</p>
<p id="az3" class="ay1">&nbsp;</p>
<p id="az4" class="ay1">&nbsp;</p>
<p id="bz1" class="ay2">&nbsp;</p>
<p id="bz2" class="ay2">&nbsp;</p>
<p id="bz3" class="ay2">&nbsp;</p>
<p id="bz4" class="ay2">&nbsp;</p>
<p id="cz1" class="ay3">&nbsp;</p>
<p id="cz2" class="ay3">&nbsp;</p>
<p id="cz3" class="ay3">&nbsp;</p>
<p id="cz4" class="ay3">&nbsp;</p>
<p id="dz1" class="ay4">&nbsp;</p>
<p id="dz2" class="ay4">&nbsp;</p>
<p id="dz3" class="ay4">&nbsp;</p>
<p id="dz4" class="ay4">&nbsp;</p>
</div>
<style><!--
.ay1{background:url('https://ekladata.com/0wQ1UHKQ6Huw5GCR4eso1PkvU9Q.jpg');}
#az1{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid white; box-shadow:0.2vw 0.2vw 0.2vw black; background-position:0% 0%; transform:translate(5vw,2vh); transition:all 1s linear 0s; background-size:80vw 92vh;}
#az2{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid grey;background-position:100% 0%; transform:translate(45vw,2vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
#az3{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%;border:0.2vw solid grey; background-position:0% 100%; transform:translate(5vw,45vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
#az4{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid grey; background-position:100% 100%; transform:translate(45vw,45vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
.ay2{background:url('https://ekladata.com/YGpkdezwIgDtDi3Vv0D6514VJcU.jpg');}
#bz1{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid white; box-shadow:0.2vw 0.2vw 0.2vw black; background-position:0% 0%; transform:translate(20vw,2vh); transition:all 1s linear 0s; background-size:80vw 92vh;}
#bz2{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid grey;background-position:100% 0%; transform:translate(60vw,2vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
#bz3{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%;border:0.2vw solid grey; background-position:0% 100%; transform:translate(20vw,45vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
#bz4{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid grey; background-position:100% 100%; transform:translate(60vw,45vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
.ay3{background:url('https://ekladata.com/5zg5df2X7VH0m1bv8Uyx65JRkLg.jpg');}
#cz1{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid white; box-shadow:0.2vw 0.2vw 0.2vw black; background-position:0% 0%; transform:translate(10vw,22vh); transition:all 1s linear 0s; background-size:80vw 92vh;}
#cz2{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid grey;background-position:100% 0%; transform:translate(50vw,22vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
#cz3{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%;border:0.2vw solid grey; background-position:0% 100%; transform:translate(10vw,67vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
#cz4{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid grey; background-position:100% 100%; transform:translate(50vw,67vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
.ay4{background:url('https://ekladata.com/4jeOv1_xwm4hrsqoYxIZqPq-ZdY.jpg');}
#dz1{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid white; box-shadow:0.2vw 0.2vw 0.2vw black; background-position:0% 0%; transform:translate(25vw,22vh); transition:all 1s linear 0s; background-size:80vw 92vh;}
#dz2{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid grey;background-position:100% 0%; transform:translate(65vw,22vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
#dz3{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%;border:0.2vw solid grey; background-position:0% 100%; transform:translate(25vw,67vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
#dz4{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; border:0.2vw solid grey; background-position:100% 100%; transform:translate(65vw,67vh); transition:all 1s linear 0s;background-size:80vw 92vh;}
#az1:hover,#bz1:hover,#cz1:hover,#dz1:hover{z-index:5; border:none; border-radius:0%; box-shadow:0 0 0; width:40vw; height:46vh; transform:translate(0vw,0vh);}
#az1:hover ~ #az2,#bz1:hover ~ #bz2,#cz1:hover ~ #cz2,#dz1:hover ~ #dz2{z-index:5; border:none; border-radius:0%; width:40vw; height:46vh; transform:translate(40vw,0vh);}
#az1:hover ~ #az3, #bz1:hover ~ #bz3,#cz1:hover ~ #cz3,#dz1:hover ~ #dz3{z-index:5; border:none; border-radius:0%; width:40vw; height:46vh; transform:translate(0vw,46vh);}
#az1:hover ~ #az4,#bz1:hover ~ #bz4,#cz1:hover ~ #cz4,#dz1:hover ~ #dz4{z-index:5; border:none; border-radius:0%; width:40vw; height:46vh; transform:translate(40vw,46vh);}
--></style>