• Montage 33

    Je reprends mon article Florilège, en 60vw/33.75vw, soit 60% de la largeur de votre écran.

    Vous pouvez y mélanger des images horizontales et verticales et de format varié, en les positionnant selon votre choix.

    Clic maintenu sur chaque vignette.

     

     

     

     

     

     

     

     

     

     

     

     



    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto;">
    <p id="col1" class="col">&nbsp;</p>
    <p id="col2" class="col">&nbsp;</p>
    <p id="col3" class="col">&nbsp;</p>
    <p id="col4" class="col">&nbsp;</p>
    <p id="col5" class="col">&nbsp;</p>
    <p id="col6" class="col">&nbsp;</p>
    <p id="col7" class="col">&nbsp;</p>
    <p id="col8" class="col">&nbsp;</p>
    <p id="col9" class="col">&nbsp;</p>
    <p id="col10" class="col">&nbsp;</p>
    <p id="col11" class="col">&nbsp;</p>
    <p id="col12" class="col">&nbsp;</p>
    </div>

    <style><!--
    .col{position:absolute; z-index:1; box-sizing:border-box; width:15vw; height:11.25vw; border:0.2vw solid white; transition:all 1s linear;}
    #col1{background:url('http://ekladata.com/CWl6C_6Aq2w1Ss3d7xgZvl2lyi8@1152x648.jpg'); transform:translate(0vw,0vw); background-size:cover;}
    #col2{background:url('http://ekladata.com/MeZX8NoVvF2q_Dp-kOaKJHKQYm8@1152x648.jpg'); transform:translate(15vw,0vw); background-size:cover;}
    #col3{background:url('http://ekladata.com/UayGHk-I1BPIkJXotFCvMeU8IQE@1152x648.jpg'); transform:translate(30vw,0vw); background-size:cover;}
    #col4{background:url('http://ekladata.com/cf7YXtH7-tOAAAFtiGtbEC-lel0@1152x648.jpg'); transform:translate(45vw,0vw); background-size:cover;}

    #col5{background:url('http://ekladata.com/RgxXchGZSQENb2W1QvpdSBCDfOc@365x648.jpg'); transform:translate(0vw,11.25vw); background-size:cover;}
    #col6{background:url('http://ekladata.com/-hRveSIHjUEXsfPef1_htzQ-5G4@365x648.jpg'); transform:translate(15vw,11.25vw); background-size:cover;}
    #col7{background:url('http://ekladata.com/nOj2v9sNBYlekF1bpoWJzlckWfs@365x648.jpg'); transform:translate(30vw,11.25vw); background-size:cover;}
    #col8{background:url('http://ekladata.com/lrcqqjjqcO9H3dh1cGnjTdZENAE@365x648.jpg'); transform:translate(45vw,11.25vw); background-size:cover;}

    #col9{background:url('http://ekladata.com/n5oHAHtH09UkzOoCVyRsbObcY2Y@1152x648.jpg'); transform:translate(0vw,22.5vw); background-size:cover;}
    #col10{background:url('http://ekladata.com/noEVp_dnLrhYuCzGvkQdPzIkwwE@1152x648.jpg'); transform:translate(15vw,22.5vw); background-size:cover;}
    #col11{background:url('http://ekladata.com/QhxbF538zvFzHgbKWtxS3cWP430@1152x648.jpg'); transform:translate(30vw,22.5vw); background-size:cover;}
    #col12{background:url('http://ekladata.com/WbdNrMW1-cp5D_iTYzci7jw1gqk@1152x648.jpg'); transform:translate(45vw,22.5vw); background-size:cover;}

    #col1:active,#col2:active,#col3:active,#col4:active,#col9:active,#col10:active,#col11:active,#col12:active{z-index:20; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    #col5:active,#col6:active,#col7:active,#col8:active{z-index:20; width:19vw; height:33.75vw; transform:translate(20vw,0vw);}
    --></style>


    J'ai placé les images verticales dans la ligne du milieu mais elles peuvent être placées n'importe où dans le montage.

    Le dimensionnement est par l'écriture: @1152x648 (horizontales en 16/9) et @365x648 (verticales en 16/9).

    Bien remplacer mes adresses images par les vôtres, sur la partie en bleu uniquement.

    Les dimensions de vos images peuvent être irrégulières; à vous de calculer taille et positionnement au clic maintenu.