• Exemple 52

    6 images au ratio 16/9, redimensionnées par le code en 1152x648px.

    Survol


    <div style="width:60vw; height:33.75vw; margin:1vh auto; text-align:left;">
    <p id="pr">Survol</p>
    <img id="mt1" class="mt" src="http://ekladata.com/YJdRgWTaHjGH60NDNrZB4Xi2X5c@1152x648.jpg">
    <img id="mt2" class="mt" src="http://ekladata.com/cA5uiuRDV9xucgTrrhQ992mRPjc@1152x648.jpg">
    <img id="mt3" class="mt" src="http://ekladata.com/cVkIuCJqGWS5TIAoOCZtTeOXUB0@1152x648.jpg">
    <img id="mt4" class="mt" src="http://ekladata.com/N5wdT8bRaXv0yJL3QUSpvWIPXwU@1152x648.jpg">
    <img id="mt5" class="mt" src="http://ekladata.com/Dyqa_V4Eql6KcnJPjmuThkkvJzI@1152x648.jpg">
    <img id="mt6" class="mt" src="http://ekladata.com/yIfzXfODNvrV0Y6W09-nPwrWwlM@1152x648.jpg">
    </div>
    <style><!--
    @import url('https://fonts.googleapis.com/css?family=Marck+Script&display=swap');
    #pr{position:absolute; z-index:1; width:10vw; transform:translate(25vw,21vw); font-family: 'Marck Script', cursive; font-size:2vw; color:brown;}
    .mt{position:absolute; z-index:1; width:16vw; height:9vw; border:0.6vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; filter:sepia(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s;}
    #mt1{transform:translate(3vw,5vw);}
    #mt2{transform:translate(22vw,5vw);}
    #mt3{transform:translate(40vw,5vw);}
    #mt4{transform:translate(3vw,19vw);}
    #mt5{transform:translate(22vw,19vw);}
    #mt6{transform:translate(40vw,19vw);}
    #mt1:hover,#mt2:hover,#mt3:hover,#mt4:hover,#mt5:hover,#mt6:hover{z-index:5; width:60vw; height:33.75vw; filter:sepia(0); transform:translate(0vw,0vw);}
    --></style>