Explication 2

Exemple avec 1 + 6 images en 16/9, dans un montage de 1200x675px.

En surligné en jaune, les ajouts pour l'éditeur Blogger.

<div style="position: relative; overflow: hidden; width: 1200px; height: 675px; margin: 50px auto; text-align: left; border: 6px ridge grey; background: url('http://ekladata.com/Znv0klXpc0DCoTXXlG2AxUfKMs8.jpg'); background-size: cover;"><input id="mvt1a" type="text" value="CLIC" />

<p id="zone1a"><span id="jd0">SURVOL</span><img id="jd1" class="jd" src="http://ekladata.com/Rn6jFaYRVOpuKROyocXgDVqss84.jpg" alt="" /> <img id="jd2" class="jd" src="http://ekladata.com/62KC3OgFP4kmFURm0jbYB52WU_g.jpg" alt="" /> <img id="jd3" class="jd" src="http://ekladata.com/dOu0Npn8pn1ru_fhb00Ht_7DA7U.jpg" alt="" /> <img id="jd4" class="jd" src="http://ekladata.com/BQGxum0pQqosm50MOyzjaGCHAaE.jpg" alt="" /> <img id="jd5" class="jd" src="http://ekladata.com/jKh34r9JQwaCTnJUtLkJKhyQFLU.jpg" alt="" /> <img id="jd6" class="jd" src="http://ekladata.com/5zf61DlCsb4ahAXcoUeq881jN-s.jpg" alt="" /></p>

</div>

<style><!--

#mvt1a{position:absolute; z-index:1; width:80px; height:40px; border:none; border-radius:10px; background:lime; box-shadow:inset -4px -4px 6px white, inset 4px 4px 6px black; text-align:center; font-size:20pt; line-height:40px; transform:translate(560px,50px);}

#zone1a{position:absolute; z-index:1; text-align:left; width:1200px; height:675px; background:#FFE4C4; margin-top:0px; 

 transform:translate(0px,-700px); transition:all 1s;}

#jd0{position:absolute; z-index:1; width:150px; height:auto; text-align:center; font-size:30px; transform:translate(475px,0px);}

.jd{position:absolute; z-index:1; width:250px; height:250px!important; border-radius:50%; border:4px solid white; filter:grayscale(1); transition:all 1s;}

#jd1{box-sizing:border-box; background-size:1200px 675px; background-position:-110px -60px; transform:translate(110px,60px);}

#jd2{box-sizing:border-box; background-size:1200px 675px; background-position:-470px -60px; transform:translate(470px,60px);}

#jd3{box-sizing:border-box; background-size:1200px 675px; background-position:-780px -60px; transform:translate(780px,60px);}

#jd4{box-sizing:border-box; background-size:1200px 675px; background-position:-110px -365px; transform:translate(110px,365px);}

#jd5{box-sizing:border-box; background-size:1200px 675px; background-position:-470px -365px; transform:translate(470px,365px);}

#jd6{box-sizing:border-box; background-size:1200px 675px; background-position:-780px -365px; transform:translate(780px,365px);}

#mvt1a:focus ~ #zone1a{transform:translate(0px,0px);}

#jd1:hover,#jd2:hover,#jd3:hover,#jd4:hover,#jd5:hover,#jd6:hover{z-index:5; width:1200px; height:675px!important; border-radius:0%; background-position:0px 0px; filter:grayscale(0); transform:translate(0px,0px);}

--></style>

SURVOL