Exemple 16

Pour publier 6 images (+ ou -) au ratio 16/9 verticales.

<div style="width: 19vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.4vh ridge white; background: linear-gradient(to top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);">
<p id="fft0">Survol</p>
<p id="fft1" class="fft">&nbsp;</p>
<p id="fft2" class="fft">&nbsp;</p>
<p id="fft3" class="fft">&nbsp;</p>
<p id="fft4" class="fft">&nbsp;</p>
<p id="fft5" class="fft">&nbsp;</p>
<p id="fft6" class="fft">&nbsp;</p>
</div>

<style><!--
#fft0{position:absolute; z-index:1; width:9vw; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(10vw,1vw);}
.fft{position:absolute; z-index:1; width:4.5vw; height:8vw; border:0.4vh solid white; transition:all 1s linear;}
#fft1{background:url('https://ekladata.com/kYFU-DDTC_YUCE7FDGCscEwVgp4.jpg'); background-size:cover; transform:translate(2vw,3vw);}
#fft2{background:url('https://ekladata.com/hF2U348vaps3Fu9q7Od3iGzR4TM.jpg'); background-size:cover; transform:translate(4vw,7vw);}
#fft3{background:url('https://ekladata.com/ilEtF57ECR23kNqQ5OTaq6S8S4o.jpg'); background-size:cover; transform:translate(6vw,11vw);}
#fft4{background:url('https://ekladata.com/R0Vax8f3uz538yhYXuwK9pVsoVA.jpg'); background-size:cover; transform:translate(8vw,15vw);}
#fft5{background:url('https://ekladata.com/d0SpDZ_Ld36BXYR8vumHZ1ldnd8.jpg'); background-size:cover; transform:translate(10vw,19vw);}
#fft6{background:url('https://ekladata.com/xvDDUs0GV97Np9azV5dvxcWpulA.jpg'); background-size:cover; transform:translate(12vw,23vw);}
#fft1:hover,#fft2:hover,#fft3:hover,#fft4:hover,#fft5:hover,#fft6:hover{z-index:5; width:19vw; height:33.75vw; border:none; transform:translate(0vw,0vw);}
--></style>