• Exemple 15

     Selon des modèles de codes en ligne; 4 images horizontales 16/9 et 4 images verticales 16/9.

    Survol jusqu'à coloration

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.5vw solid white; margin: 1vh auto; text-align: left; bckground: white;">
    <p id="ind">Survol jusqu'&agrave; coloration</p>
    <p id="cs1" class="cs">&nbsp;</p>
    <p id="cs2" class="cs">&nbsp;</p>
    <p id="cs3" class="cs">&nbsp;</p>
    <p id="cs4" class="cs">&nbsp;</p>
    <p id="cs5" class="cs">&nbsp;</p>
    <p id="cs6" class="cs">&nbsp;</p>
    <p id="cs7" class="cs">&nbsp;</p>
    <p id="cs8" class="cs">&nbsp;</p>
    </div>

    <style><!--
    #ind{position:absolute; z-index:1; width:29vw; height:3.75vw; text-align:center; line-height:3.75vw; font-size:2vw; color:brown; text-shadow:0.1vh 0.1vh black; transform:translate(15.5vw,15vw);}
    .cs{position:absolute; z-index:1; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
    #cs1{width:15vw; height:16.75vw; background:url('http://ekladata.com/8oIEcT1XePzp_3-etx0MUZoQHKo@1152x648.jpg'); background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #cs2{width:15vw; height:16.5vw; background:url('http://ekladata.com/nYGvqhkjLQmE_xmMt_yowyCgaA0@1152x648.jpg'); background-position:0vw -17.25vw; transform:translate(0vw,17.25vw);}
    #cs3{width:14.5vw; height:14.5vw; background:url('http://ekladata.com/O1bFtaUJDzYjjG8b6rsb5CZDY3I@365x648.jpg'); background-position:-4.5vw 0vw; transform:translate(15.5vw,0vw);}
    #cs4{width:14.5vw; height:14.5vw; background:url('http://ekladata.com/Vz82yBQqC3_ITjtJyyWvEZrz52k@365x648.jpg'); background-position:-4.5vw -19.25vw; transform:translate(15.5vw,19.25vw);}
    #cs5{width:14.5vw; height:14.5vw; background:url('http://ekladata.com/OttBKk_5lJjIR5Bf55MpW5eIft8@365x648.jpg'); background-position:-4.5vw 0vw; transform:translate(30.5vw,0vw);}
    #cs6{width:14.5vw; height:14.5vw; background:url('http://ekladata.com/m197mh24UgIuVtd2ifGnnKP0UBI@365x648.jpg'); background-position:-4.5vw -19.25vw; transform:translate(30.5vw,19.25vw);}
    #cs7{width:14.5vw; height:16.75vw; background:url('http://ekladata.com/v7QuvoQ9VuoTxVcYQZpw5LKO67s@1152x648.jpg'); background-position:-45.5vw 0vw; transform:translate(45.5vw,0vw);}
    #cs8{width:14.5vw; height:16.5vw; background:url('http://ekladata.com/_PO4JcGQacvyYOsuFuYoixM_BrE@1152x648.jpg'); background-position:-45.5vw -17.25vw; transform:translate(45.5vw,17.25vw);}
    #cs1:hover,#cs2:hover,#cs7:hover,#cs8:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); filter:grayscale(0);}
    #cs3:hover,#cs4:hover{z-index:5; width:19vw; height:33.75vw; background-position:0vw 0vw; transform:translate(11vw,0vw); filter:grayscale(0);}
    #cs5:hover,#cs6:hover{z-index:5; width:19vw; height:33.75vw; background-position:0vw 0vw; transform:translate(26vw,0vw); filter:grayscale(0);}
    --></style>