• Montage 128

    Ce n'est qu'une variante d'un montage déjà proposé mais peut-être plus compréhensible en écriture.

    Je place souvent les images en fond de paragraphes mais placer directement les images offre l'avantage d'un code plus clair et de pouvoir fixer les images agrandies en déplacant les curseur dessus, clic gauche enfoncé .

    Clic maintenu sur chaque vignette.

    Les adresses images de chaque vignette et de chaque grande image correspondante sont les mêmes mais la vignette reçoit une adresse réduite en taille et en poids, en ajoutant: @307x173 avant .jpg
    Images au ratio 16/9.
    L'agrandissement se fait à partir du dessous de la barre de titre de l'article, qui est à 22vw du haut de l'écran.
    Le positionnement du cadre des vignettes dépend de la structure de votre blog; j'ai effacé mes valeurs pour ne pas vous induire en erreur.

    <div style="width: 60vw; height: 21vw;"><img id="min1" class="min" src="http://ekladata.com/ark7Np16HHP07nkJcFtjZ1yUnkU@307x173.jpg" alt="" /> <img id="min2" class="min" src="http://ekladata.com/zDnGV5squFe3vVPqvoZ2DSC-_eE@307x173.jpg" alt="" /> <img id="min3" class="min" src="http://ekladata.com/OcFMeFWwIE1pNom-uCERVBwmexo@307x173.jpg" alt="" /> <img id="min4" class="min" src="http://ekladata.com/KUyLyUivDlQc6YWLYfXQ5HMjF8M@307x173.jpg" alt="" /> <img id="min5" class="min" src="http://ekladata.com/Xt3BeUgSf4bc9OWiVB1BIh3oBN4@307x173.jpg" alt="" /> <img id="min6" class="min" src="http://ekladata.com/2rXGGWKcgBFe97cJnEHosAljFng@307x173.jpg" alt="" /> <img id="gde1" class="gde" src="http://ekladata.com/ark7Np16HHP07nkJcFtjZ1yUnkU.jpg" alt="" /> <img id="gde2" class="gde" src="http://ekladata.com/zDnGV5squFe3vVPqvoZ2DSC-_eE.jpg" alt="" /> <img id="gde3" class="gde" src="http://ekladata.com/OcFMeFWwIE1pNom-uCERVBwmexo.jpg" alt="" /> <img id="gde4" class="gde" src="http://ekladata.com/KUyLyUivDlQc6YWLYfXQ5HMjF8M.jpg" alt="" /> <img id="gde5" class="gde" src="http://ekladata.com/Xt3BeUgSf4bc9OWiVB1BIh3oBN4.jpg" alt="" /> <img id="gde6" class="gde" src="http://ekladata.com/2rXGGWKcgBFe97cJnEHosAljFng.jpg" alt="" /></div>
    <style><!--
    .min{position:absolute; z-index:1; width:16vw; height:9vw; border:0.5vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black;}
    #min1{box-sizing:border-box; transform:translate(3vw,0vw);}
    #min2{box-sizing:border-box; transform:translate(22vw,0vw);}
    #min3{box-sizing:border-box; transform:translate(41vw,0vw);}
    #min4{box-sizing:border-box; transform:translate(3vw,13vw);}
    #min5{box-sizing:border-box; transform:translate(22vw,13vw);}
    #min6{box-sizing:border-box; transform:translate(41vw,13vw);}
    .gde{position:absolute; z-index:5; width:100vw; height:0vw; top:22vw; left:0; transition:all 1s linear;}
    #min1:active ~ #gde1,#min2:active ~ #gde2,#min3:active ~ #gde3,#min4:active ~ #gde4,#min5:active ~ #gde5,#min6:active ~ #gde6{height:56.25vw;}
    --></style>