• Exemple 12

     6 images horizontales, au ratio 16/9, redimensionnées dans le code en 60%x33.75% de la largeur de l'écran de lecture.

    Survol jusqu'à coloration

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
    <p id="sde0">Survol jusqu'&agrave; coloration</p>
    <p id="sde1" class="sde">&nbsp;</p>
    <p id="sde2" class="sde">&nbsp;</p>
    <p id="sde3" class="sde">&nbsp;</p>
    <p id="sde4" class="sde">&nbsp;</p>
    <p id="sde5" class="sde">&nbsp;</p>
    <p id="sde6" class="sde">&nbsp;</p>
    </div>
    <style><!--
    #sde0{position:absolute; z-index:1; width:30vw; font-size:2vw; transform:translate(15vw,0vw);}
    .sde{position:absolute; filter:grayscale(1); transition:transform 1s linear 0s,width 1s linear 0s, height 1s linear 0s,border 1s linear 0s, filter 1s linear 1s;}
    #sde0{position:absolute; z-index:1; width:30vw; font-size:2vw; transform:translate(15vw,0vw);}
    .sde{position:absolute; filter:grayscale(1); transition:transform 1s linear 0s,width 1s linear 0s, height 1s linear 0s,border 1s linear 0s, filter 1s linear 1s;}
    #sde1{z-index:10; width:20vw; height:20vw; border-radius:50%; border:0.4vh solid white; transform:translate(2vw,12vw); background:url('http://ekladata.com/2R1e3jkDfVeIi90QSxeR1Q0_-lo@1152x648.jpg'); background-size:cover;}
    #sde2{z-index:9; width:15vw; height:15vw; border-radius:50%; border:0.4vh solid white; transform:translate(15vw,10vw); background:url('http://ekladata.com/kKlZxwLiqi5LMtef3Cv-AgHHJNI@1152x648.jpg'); background-size:cover;}
    #sde3{z-index:8; width:11vw; height:11vw; border-radius:50%; border:0.4vh solid white; transform:translate(24vw,9vw); background:url('http://ekladata.com/Pq3MbIpzvVyiZ4_zQzVNTGc5DUM@1152x648.jpg'); background-size:cover;}
    #sde4{z-index:7; width:8vw; height:8vw; border-radius:50%; border:0.4vh solid white; transform:translate(30vw,8vw); background:url('http://ekladata.com/waQHmD0zcH3aAho_cKm0HhvD3JM@1152x648.jpg'); background-size:cover;}
    #sde5{z-index:6; width:6vw; height:6vw; border-radius:50%; border:0.4vh solid white; transform:translate(34vw,7.5vw); background:url('http://ekladata.com/Q0LdUrSlhlxjJ-A9GP7pmK8zOqY@1152x648.jpg'); background-size:cover;}
    #sde6{z-index:5; width:4.5vw; height:4.5vw; border-radius:50%; border:0.4vh solid white; transform:translate(37vw,7vw); background:url('http://ekladata.com/bQgYEgCxAum5eD9Cs2BqeF_amSE@1152x648.jpg'); background-size:cover;}
    #sde1:hover,#sde2:hover,#sde3:hover,#sde4:hover,#sde5:hover,#sde6:hover{z-index:15; width:60vw; height:33.75vw; transform:translate(0vw,0vw); border-radius:0%; filter:grayscale(0);}
    --></style>