• 21.02.2024

    Dans cet exemple, en 1100x619px, ratio 16/9 (pour changer !), j'ai placé 3 images verticales et 4 images horizontales, dont les vignettes sont de mêmes dimensions.

    On peut, bien entendu, faire un autre mélange que le mien et dimensionner en 800x600px.

    SURVOL


    <div style="width: 1100px; height: 619px; margin: 50px auto; text-align: left;">
    <p id="mer0">SURVOL</p>
    <img id="mer1" class="mer" src="http://ekladata.com/i0GxHj-csMc2aysgq-9bNDHQjdA.jpg" alt="" />
    <img id="mer2" class="mer" src="http://ekladata.com/R2aBaCRRXRoPdJRvLHLnZb1HIpU.jpg" alt="" />
    <img id="mer3" class="mer" src="http://ekladata.com/JkyBVE7Pl6QoUAqGQ2urWHhcXkU.jpg" alt="" />
    <img id="mer4" class="mer" src="http://ekladata.com/jX4h8r3XtdEUu9_XEmzkLGtNhlQ.jpg" alt="" />
    <img id="mer5" class="mer" src="http://ekladata.com/Lvh_nztxOv2ioJ5Q7mzs04N8Igs.jpg" alt="" />
    <img id="mer6" class="mer" src="http://ekladata.com/u2skQ6CdAQl6Rk-Rpc7ACZjmq44.jpg" alt="" />
    <img id="mer7" class="mer" src="http://ekladata.com/Zk_igWyTIQ04O20-xxRQwNm19mw.jpg" alt="" />
    </div>

    <style><!--
    #mer0{position:absolute; z-index:1; width:150px; font-size:30px; transform:translate(475px,0px);}
    .mer{position:absolute; z-index:1; width:152px; height:270px; border:3px solid white; filter:grayscale(1); transition:all 1s;}
    #mer1{transform:translate(50px,150px) rotate(-15deg); background-size:1100px 619px; background-position:-50px -150px;}
    #mer2{transform:translate(190px,150px) rotate(15deg); background-size:348px 619px; background-position:-190px -150px;}
    #mer3{transform:translate(330px,150px) rotate(-15deg); background-size:1100px 619px; background-position:-330px -150px;}
    #mer4{transform:translate(470px,150px) rotate(15deg); background-size:348px 619px; background-position:-470px -150px;}
    #mer5{transform:translate(610px,150px) rotate(-15deg); background-size:1100px 619px; background-position:-610px -150px;}
    #mer6{transform:translate(750px,150px) rotate(15deg); background-size:348px 619px; background-position:-750px -150px;}
    #mer7{transform:translate(890px,150px) rotate(-15deg); background-size:1100px 619px; background-position:-890px -150px;}
    #mer1:hover,#mer3:hover,#mer5:hover,#mer7:hover{z-index:5; box-sizing:border-box; width:1100px; height:619px; transform:translate(0px,0px) rotate(0deg); background-position:0px 0px; filter:grayscale(0);}
    #mer2:hover{z-index:5; box-sizing:border-box; width:348px; height:619px; transform:translate(0px,0px) rotate(0deg); background-position:0px 0px; filter:grayscale(0);}
    #mer4:hover{z-index:5; box-sizing:border-box; width:348px; height:619px; transform:translate(400px,0px) rotate(0deg); background-position:0px 0px; filter:grayscale(0);}
    #mer6:hover{z-index:5; box-sizing:border-box; width:348px; height:619px; transform:translate(752px,0px) rotate(0deg); background-position:0px 0px; filter:grayscale(0);}
    --></style>