• Exemple 54

    8 images au ration 16/9 redimensionnées par le code en 1152x648px.

    Survol


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
    <img id="lemps1" class="lemps" src="http://ekladata.com/6nKDGuM8wN0RQPmoMudy39Gl9S4@1152x648.jpg" alt="" />
    <img id="lemps2" class="lemps" src="http://ekladata.com/hezgZUlAu4dA4wsKm1FReOytRzE@1152x648.jpg" alt="" />
    <img id="lemps3" class="lemps" src="http://ekladata.com/aXbFIKhUOzE0ToUl3tStYzpd1Jg@1152x648.jpg" alt="" />
    <img id="lemps4" class="lemps" src="http://ekladata.com/bCpoL1zX3oW-tXIcJlB8GIFdGpY@1152x648.jpg" alt="" />
    <img id="lemps5" class="lemps" src="http://ekladata.com/DEIqBqL35xByDr689Fla2o-CgRw@1152x648.jpg" alt="" />
    <img id="lemps6" class="lemps" src="http://ekladata.com/s8EqODsMVJpGk7TLhDTbDPXBNrI@1152x648.jpg" alt="" />
    <img id="lemps7" class="lemps" src="http://ekladata.com/1JVrAKrCe5YNp0UAXlFH1fUUunY@1152x648.jpg" alt="" />
    <img id="lemps8" class="lemps" src="http://ekladata.com/8PjQisayubPjHtMAahzI6CmxWdQ@1152x648.jpg" alt="" />
    <p id="pr">Survol</p>
    </div>
    <style><!--
    @import url('https://fonts.googleapis.com/css?family=Marck+Script&display=swap');
    #pr{position:absolute; z-index:1; width:10vw; transform:translate(17.5vw,0vw); font-family: 'Marck Script', cursive; font-size:2vw; color:brown;}
    .lemps{position:absolute; z-index:1; width:12vw; height:6.75vw; border:0.4vh solid white; background:cover; box-shadow:0.4vh 0.4vh 0.6vh black; filter:hue-rotate(120deg); transition:all 1s linear;}
    #lemps1{transform:translate(0vw,0vw);}
    #lemps2{transform:translate(3vw,5vw);}
    #lemps3{transform:translate(6vw,10vw);}
    #lemps4{transform:translate(9vw,15vw);}
    #lemps5{transform:translate(30vw,0vw);}
    #lemps6{transform:translate(33vw,5vw);}
    #lemps7{transform:translate(36vw,10vw);}
    #lemps8{transform:translate(39vw,15vw);}
    #lemps1:hover,#lemps2:hover,#lemps3:hover,#lemps4:hover,#lemps5:hover,#lemps6:hover,#lemps7:hover,#lemps8:hover{z-index:5; width:60vw; height:33.75vw; filter:hue-rotate(0deg); transform:translate(0vw,0vw);}
    --></style>