• Exemple 12b

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

    Survol jusqu'à coloration

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; ">
    <p id="fera0">Survol jusqu'&agrave; coloration</p>
    <p id="fera1" class="fera">&nbsp;</p>
    <p id="fera2" class="fera">&nbsp;</p>
    <p id="fera3" class="fera">&nbsp;</p>
    <p id="fera4" class="fera">&nbsp;</p>
    <p id="fera5" class="fera">&nbsp;</p>
    <p id="fera6" class="fera">&nbsp;</p>
    </div>
    <style><!--
    #fera0{position:absolute; z-index:1; width:30vw; font-size:2vw; transform:translate(15vw,0vw);}
    .fera{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;}
    #fera1{z-index:1; width:26vw; height:5vw; border:0.4vh solid white; transform:translate(17vw,3.8vw) perspective(10vw) rotateX(30deg); transform-origin:bottom center; background:url('http://ekladata.com/-gMp2SaIixZpTRyQNrlEnr8Wg3c@1152x648.jpg'); background-size:cover;}
    #fera2{z-index:1; width:26vw; height:5vw; border:0.4vh solid white; transform:translate(17vw,26.7vw) perspective(10vw) rotateX(-30deg); transform-origin:top center; background:url('http://ekladata.com/jv4_Zcg-yKoKGSnRVtfDFFspFes@1152x648.jpg'); background-size:cover;}
    #fera3{z-index:1; width:33vw; height:5vw; border:0.4vh solid white; transform:translate(13.5vw,8vw) perspective(10vw) rotateX(25deg); transform-origin:bottom center; background:url('http://ekladata.com/iOmvLjIHdHL-zGSXzUOu-tZ5LKU@1152x648.jpg'); background-size:cover;}
    #fera4{z-index:1; width:33vw; height:5vw; border:0.4vh solid white; transform:translate(13.5vw,22.5vw) perspective(10vw) rotateX(-25deg); transform-origin:top center; background:url('http://ekladata.com/raE8YSkpf7SJKO3GK8sK3h9PtIQ@1152x648.jpg'); background-size:cover;}
    #fera5{z-index:1; width:40vw; height:5vw; border:0.4vh solid white; transform:translate(10vw,12.5vw) perspective(10vw) rotateX(20deg); transform-origin:bottom center; background:url('http://ekladata.com/A_sT80TJ-ELCzeinrXsq_BRZtw8@1152x648.jpg'); background-size:cover;}
    #fera6{z-index:1; width:40vw; height:5vw; border:0.4vh solid white; transform:translate(10vw,18vw) perspective(10vw) rotateX(-20deg); transform-origin:top center; background:url('http://ekladata.com/q7qYJxlV8bxWl3L0-cyoPtHT_pQ@1152x648.jpg'); background-size:cover;}
    #fera1:hover,#fera2:hover,#fera3:hover,#fera4:hover,#fera5:hover,#fera6:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); filter:grayscale(0);}
    --></style>