Montage 114

Je reviens sur ma page "Album photos".

Selon la structure de votre page de blog, vous devrez en adapter le principe.

La commande peut être le survol si les vignettes sont facilement accessibles mais l'animation doit être paramétrée individuellement ; par contre, le clic maintenu est plus pratique car on peut animer la vignette sans risque de sortir de la commande.

L'agrandissement peut se faire où on le souhaite, selon la position de la bande de vignettes dans l'article.

Il peut être en plein écran ou avec une taille précise.

Ma proposition sera pour une bande de vignettes de 60vw de large, soit 60% de la largeur de l'écran de lecture.

La taille des vignettes est à votre convenance ainsi que leurs positions.

Dans cet exemple, les vignettes horizontales font 8vw par 4.5vw de haut et les verticales font 5vw par 9vw de haut.

La bordure est intégrée dans les dimensions des vignettes par box-sizing:border-box;

<div style="width: 60vw; height: 9vw; margin: 1vh auto; text-align: left;"><img id="vgh1" class="vgh" src="http://ekladata.com/zQGRiE4mVhUEEx2ldgIDEuM1MLc.jpg" alt="" /> <img id="vgh2" class="vgh" src="http://ekladata.com/5W33X__nsnNfWbbAXMchJM1hShE.jpg" alt="" /> <img id="vgv1" class="vgv" src="http://ekladata.com/x0vL71HM4awBkI7DvcioEErfwSA.jpg" alt="" /> <img id="vgh3" class="vgh" src="http://ekladata.com/36jcHc7hFJHfWUN5eFZkbw-z0JA.jpg" alt="" /> <img id="vgh4" class="vgh" src="http://ekladata.com/H0FXNbB993yXgGVLwH6SkbH3ox0.jpg" alt="" /> <img id="vgv2" class="vgv" src="http://ekladata.com/Uw8tFPKZ4j5LoJNDNW_CeDBpu84.jpg" alt="" /> <img id="vgh5" class="vgh" src="http://ekladata.com/2AX4z5PDJXbIkpSofh059HuLtMM.jpg" alt="" /> <img id="vgh6" class="vgh" src="http://ekladata.com/5oHzl9APwdzK3wiBC39PZyi6-Ds.jpg" alt="" /> <img id="vgv3" class="vgv" src="http://ekladata.com/ppalnjTopCidQfW10DC7VgiZnH4.jpg" alt="" /> <img id="vgh7" class="vgh" src="http://ekladata.com/-G8E9oiTq3_9SvSukf79akrlm2Q.jpg" alt="" /> <img id="vgh8" class="vgh" src="http://ekladata.com/Q-yHxpuDM84ByhjHsrROekT_lK4.jpg" alt="" /> <img id="vgv4" class="vgv" src="http://ekladata.com/tdXd5PLMxFpQXyhXQZZIJwlQGrQ.jpg" alt="" /> <img id="vgh9" class="vgh" src="http://ekladata.com/1IxHriyVYr8zk1msaKqtuMl-e2k.jpg" alt="" /> <img id="vgh10" class="vgh" src="http://ekladata.com/pR-YvB6ihTmZqoNaleuW8Rkpu1Y.jpg" alt="" /></div>


<style><!--
.vgh{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.3vh solid white; transition:all 1s linear;}
.vgv{position:absolute; z-index:1; width:5vw; height:9vw; border:0.3vh solid white; transition:all 1s linear;}
#vgh1{box-sizing:border-box; transform:translate(0vw,0vw);}
#vgh2{box-sizing:border-box; transform:translate(0vw,4.5vw);}
#vgv1{box-sizing:border-box; transform:translate(8vw,0vw);}
#vgh3{box-sizing:border-box; transform:translate(13vw,0vw);}
#vgh4{box-sizing:border-box; transform:translate(13vw,4.5vw);}
#vgv2{box-sizing:border-box; transform:translate(21vw,0vw);}
#vgh5{box-sizing:border-box; transform:translate(26vw,0vw);}
#vgh6{box-sizing:border-box; transform:translate(26vw,4.5vw);}
#vgv3{box-sizing:border-box; transform:translate(34vw,0vw);}
#vgh7{box-sizing:border-box; transform:translate(39vw,0vw);}
#vgh8{box-sizing:border-box; transform:translate(39vw,4.5vw);}
#vgv4{box-sizing:border-box; transform:translate(47vw,0vw);}
#vgh9{box-sizing:border-box; transform:translate(52vw,0vw);}
#vgh10{box-sizing:border-box; transform:translate(52vw,4.5vw);}
#vgh1:active,#vgh2:active,#vgh3:active,#vgh4:active,#vgh5:active,#vgh6:active,#vgh7:active,#vgh8:active,#vgh9:active,#vgh10:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,-10vw);}
#vgv1:active,#vgv2:active,#vgv3:active,#vgv4:active{z-index:5; width:19vw; height:33.75vw; transform:translate(20vw,-10vw);}
--></style>