Montage 123b

Rappel: pour vous éviter de maintenir le clic enfoncé, déplacez votre curseur sur l'image agrandie: elle restera fixe; un clic dessus pour la réduire.

Clic maintenu

 

<div style="width: 60vw; height: 33.75vw; margin: 1vh 0 0 20vw; text-align: left;"><img id="aut1" class="aut" src="http://ekladata.com/ECCNKLfwq5IPTkkphSyqKWt9-zc.jpg" alt="" /><img id="aut2" class="aut" src="http://ekladata.com/8xeYbbW-poRSTvwAqmEIOAQcRT8.jpg" alt="" /><img id="aut3" class="aut" src="http://ekladata.com/tHgfE09-dLd-vgL8Jpi6M7UGLRk.jpg" alt="" /><img id="aut4" class="aut" src="http://ekladata.com/o5jkavgHOpHI0huwrCz0ilsVNl4.jpg" alt="" /><img id="aut5" class="aut" src="http://ekladata.com/aOCURPvGtExt9ITmlYCi3BOgoNU.jpg" alt="" /><img id="aut6" class="aut" src="http://ekladata.com/HiyTd2d7_yoogB-34qp3XwLpU9Y.jpg" alt="" /><img id="aut7" class="aut" src="http://ekladata.com/SnQXa4_RuOUevsAQWL5vDEcn1Xw.jpg" alt="" /><img id="aut8" class="aut" src="http://ekladata.com/wh4_wtdfybAPf9Yrg2sZpMd4HR4.jpg" alt="" />
<p id="sv"><span style="background: rgba(255,255,255,0.5);">Clic maintenu</span></p>
<p id="fd">&nbsp;</p>
</div>

<style><!--
#sv{position:absolute; z-index:2; width:20vw; height:11vw; box-sizing:border-box; transform:translate(20vw,13vw); text-align:center; font-size:2vw; color:coral; line-height:5vw; text-shadow:0.2vh 0.2vh black;}
#fd{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/1ytnaskqBO8KCTlXzMHQpR9p3NI.jpg'); background-size:cover;}
.aut{position:absolute; z-index:2; width:15vw; height:6vw; border-radius:3vw; border:0.3vh solid white; box-shadow:0.3vh 0.3vh 0.6vh black; background-size:cover; transition:all 1s linear;}
#aut1{box-sizing:border-box; transform:translate(3vw,2vw) rotatey(180deg);}
#aut2{box-sizing:border-box; transform:translate(22vw,2vw) rotatey(180deg);}
#aut3{box-sizing:border-box; transform:translate(41vw,2vw) rotatey(180deg);}
#aut4{box-sizing:border-box; transform:translate(3vw,13vw) rotatey(180deg);}
#aut5{box-sizing:border-box; transform:translate(41vw,13vw) rotatey(180deg);}
#aut6{box-sizing:border-box; transform:translate(3vw,25vw) rotatey(180deg);}
#aut7{box-sizing:border-box; transform:translate(22vw,25vw) rotatey(180deg);}
#aut8{box-sizing:border-box; transform:translate(41vw,25vw) rotatey(180deg);}
#aut1:active,#aut2:active,#aut3:active,#aut4:active,#aut5:active,#aut6:active,#aut7:active,#aut8:active{z-index:5; width:100vw; height:56.25vw; border-radius:0%; box-shadow:none; transform:translate(-21vw,0vw) rotatey(0deg);}
--></style>