Exemple 10

 Images redimensionnées en 1152x648px par le code.

Survol

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white; box-shadow: 0.5vh 0.5vh 0.8vh black; text-align: left; background: radial-gradient(ellipse at center, #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);">
<p id="rd0">Survol</p>
<img id="ave1" class="ave" src="http://ekladata.com/qFPwflMVm6Ur2_tPgXYbF3bbhIM@1132x648.jpg" alt="" />
<img id="ave2" class="ave" src="http://ekladata.com/ZaPgZmh6y3Ls-VZE7hlHe9loERo@1132x648.jpg" alt="" />
<img id="ave3" class="ave" src="http://ekladata.com/nEw66Zrmt7-KyJftrAYFdkTNV-s@1132x648.jpg" alt="" />
<img id="ave4" class="ave" src="http://ekladata.com/rEAgvWxBKx8k1JYDCwFyaaENGEg@1132x648.jpg" alt="" />
<img id="ave5" class="ave" src="http://ekladata.com/kLnF7C4B05PL11Bqv89fdABcZmg@1132x648.jpg" alt="" />
<img id="ave6" class="ave" src="http://ekladata.com/MeLU0maAwGTQqoHQLWfY2OfXJ4Y@1132x648.jpg" alt="" />
<img id="ave7" class="ave" src="http://ekladata.com/ZhzjJYFLe24UgPpwJtguSHHX2uY@1132x648.jpg" alt="" />
<img id="ave8" class="ave" src="http://ekladata.com/jl-2LCBk16oI-oAytoeUho2Ew7Q@1132x648.jpg" alt="" />
</div>
<hr style="border: 0.3vh double grey;" />
<p>...</p>
<style><!--
#rd0{position:absolute; z-index:1; width:15vw; text-align:center; font-size:2vw; color:brown; text-shadow:0.1vh 0.1vh black;transform:translate(22.5vw,15vw);}
.ave{position:absolute; z-index:1; border:0.3vh solid white; transition:all 1s linear;}
#ave1{width:12vw; height:15vw;transform:translate(5.5vw,2vw);}
#ave2{width:12vw; height:12vw;transform:translate(17.8vw,2vw);}
#ave3{width:12vw; height:9vw;transform:translate(30.1vw,2vw);}
#ave4{width:12vw; height:6vw;transform:translate(42.4vw,2vw);}
#ave5{width:12vw; height:6vw;transform:translate(5.5vw,25vw);}
#ave6{width:12vw; height:9vw;transform:translate(17.8vw,22vw);}
#ave7{width:12vw; height:12vw;transform:translate(30.1vw,19vw);}
#ave8{width:12vw; height:15vw;transform:translate(42.4vw,16vw);}
#ave1:hover,#ave2:hover,#ave3:hover,#ave4:hover,#ave5:hover,#ave6:hover,#ave7:hover,#ave8:hover{z-index:5; width:60vw; height:33.75vw; border:none; box-shadow:none; border-radius:0%; transform:translate(0vw,0vw);}
--></style>