Montage 23

Beaucoup de blogs présentent des photos, les unes sous les autres; on peut présenter beaucoup d'images sans avoir à jouer de l'ascenseur et d'une façon, à mon avis, plus ludique.

Je propose parfois des montages plus complexes mais nous pouvons faire des choses simples: par exemple, avec une structure dans ce genre: Clic maintenu sur les vignettes.

Avec images en fond des vignettes, au lieu de couleurs:

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: linear-gradient(to bottom, #d4e4ef 0%,#86aecc 100%);">
<p id="cca">Clic maintenu.</p>
<p id="col1a" class="cola">&nbsp;</p>
<p id="col2a" class="cola">&nbsp;</p>
<p id="col3a" class="cola">&nbsp;</p>
<p id="col4a" class="cola">&nbsp;</p>
<p id="col5a" class="cola">&nbsp;</p>
<p id="col6a" class="cola">&nbsp;</p>
<p id="col7a" class="cola">&nbsp;</p>
<p id="col8a" class="cola">&nbsp;</p>
<p id="col9a" class="cola">&nbsp;</p>
<p id="col10a" class="cola">&nbsp;</p>
<p id="col11a" class="cola">&nbsp;</p>
<p id="col12a" class="cola">&nbsp;</p>
<p id="col13a" class="cola">&nbsp;</p>
</div>
<style><!--
#cca{position:absolute; z-index:1; text-align:center; width:60vw; font-size:1.5vw; color:green; text-sahdow:0.1vh 0.1vh black;}
.cola{position:absolute; z-index:1; width:12vw; height:6.75vw; border:0.6vh solid white; box-shadow:0.4vh 0.4vh 0.58vh black; transition:all 1s linear;}
#col1a{background:url('http://ekladata.com/6FEU8hbQcwSjZ8XnT8GXybFKNmE@1152x648.jpg'); background-size:cover; transform:translate(4vw,4vw);}
#col2a{background:url('http://ekladata.com/Kmd2LZM8ozzkLbLZqHN93FDSSlY@1152x648.jpg'); background-size:cover; transform:translate(24vw,4vw);}
#col3a{background:url('http://ekladata.com/Dm8W1SteVY038Ep4K2pZl204Hlo@1152x648.jpg'); background-size:cover; transform:translate(44vw,4vw);}
#col4a{background:url('http://ekladata.com/OQCxO49KgZi82nB_gG-g9Btd-gE@1152x648.jpg'); background-size:cover; transform:translate(14vw,8.75vw);}
#col5a{background:url('http://ekladata.com/BnvXSkwz8IfjlW8vuyqol30qXj0@1152x648.jpg'); background-size:cover; transform:translate(34vw,8.75vw);}
#col6a{background:url('http://ekladata.com/HmatsYi7UTiUpTip4qpd0HJy7kM@1152x648.jpg'); background-size:cover; transform:translate(4vw,12.75vw);}
#col7a{background:url('http://ekladata.com/uRPU8o6OcTXNWNclzPASU1vrhVs@1152x648.jpg'); background-size:cover; transform:translate(24vw,12.75vw);}
#col8a{background:url('http://ekladata.com/GNeO-EhjtV-9Q21APJ82SYkgmZA@1152x648.jpg'); background-size:cover; transform:translate(44vw,12.75vw);}
#col9a{background:url('http://ekladata.com/K32cewSjVoBoZ9vc-RwBjEuOqus@1152x648.jpg'); background-size:cover; transform:translate(14vw,17.5vw);}
#col10a{background:url('http://ekladata.com/m5yVQVZ3yqOCtZCbFNW4HG2KDvQ@1152x648.jpg'); background-size:cover; transform:translate(34vw,17.5vw);}
#col11a{background:url('http://ekladata.com/E68k-ik5HCf-wv0oHytGTvpAjnA@1152x648.jpg'); background-size:cover; transform:translate(4vw,22.25vw);}
#col12a{background:url('http://ekladata.com/-RM7tsXGw72PxBEcomlKMl0Nlks@1152x648.jpg'); background-size:cover; transform:translate(24vw,22.25vw);}
#col13a{background:url('http://ekladata.com/QAKWuFewIn3GBEdWlhHGVg3Irvo@1152x648.jpg'); background-size:cover; transform:translate(44vw,22.25vw);}
#col1a:active,#col2a:active,#col3a:active,#col4a:active,#col5a:active,#col6a:active,#col7a:active,#col8a:active,#col9a:active,#col10a:active,#col11a:active,#col12a:active,#col13a:active{z-index:5; width:60vw; height:33.75vw; border:none;transform:translate(0vw,0vw);}
--></style>

Comme vu sur la page Poids/dimensions, les images sont hébergées en 1920x1080px et réduites en 1152x648px pas l'ajout de @1152x648 dans l'adresse.