Montage 269

Exemple en 80vw par 45vw, code en 900px par 506px; 5 images au ratio 16/9. 

Clic maintenu

<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left;"><img id="rdc0" src="http://ekladata.com/hATvpThAKF1HAnwuhvnk6lP04Lo.jpg" alt="" /> <img id="rdc1" class="rdc" src="http://ekladata.com/NZhXRqv9YK_hNYx5__U3Tc5JF9Y.jpg" alt="" /> <img id="rdc2" class="rdc" src="http://ekladata.com/7lqtwPrNifaE8YSnhWbPFtOPgLU.jpg" alt="" /> <img id="rdc3" class="rdc" src="http://ekladata.com/zH2PzMizpXWEgZQWP5zQgDdiluo.jpg" alt="" /> <img id="rdc4" class="rdc" src="http://ekladata.com/vHXq0xlkP16arNT2jZUL9oSbG9U.jpg" alt="" />
<p id="cm">Clic maintenu</p>
</div>
<style><!--
#cm{position:absolute; z-index:1; width:100px; font-size:20px; transform:translate(70px,5px);}
#rdc0{position:absolute; z-index:1; width:900px; height:506px; box-sizing:border-box; border-radius:50%; border:5px ridge white;}
.rdc{position:absolute; z-index:1; width:60px; height:60px; border-radius:50%; border:4px ridge white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, border-radius 1s linear 1s;}
#rdc1{box-sizing:border-box; transform:translate(5px,5px) rotatey(180deg);}
#rdc2{box-sizing:border-box; transform:translate(820px,5px) rotatey(180deg);}
#rdc3{box-sizing:border-box; transform:translate(5px,450px) rotatey(180deg);}
#rdc4{box-sizing:border-box; transform:translate(820px,450px) rotatey(180deg);}
#rdc1:hover,#rdc2:hover,#rdc3:hover,#rdc4:hover{filter:grayscale(0);}
#rdc1:active,#rdc2:active,#rdc3:active,#rdc4:active{z-index:5; transform:translate(0px,0px) rotatey(0deg); width:900px; height:506px; border-radius:0%; filter:grayscale(0);}
--></style>