Montage 125

Pour 10 images verticales, ratio 16/9

Clic maintenu

<div style="width: 60vw; height: 33.75vw; background: url('http://ekladata.com/_MnFZ-Gzlevc1PIta7kt4j5PEoY/00044.jpg'); margin: 1vh auto; border: 0.1vh solid black; text-align: left;"><img id="ny1" class="ny" src="http://ekladata.com/8J4y8rGfEMufLPwYSWf3ax13KIA.jpg" alt="" /> <img id="ny2" class="ny" src="http://ekladata.com/kceDbQy1nNYXUfFGzpBLNHhAY90.jpg" alt="" /> <img id="ny3" class="ny" src="http://ekladata.com/Wk0gtYpAh3-IXsylklAEKJwoY1c.jpg" alt="" /> <img id="ny4" class="ny" src="http://ekladata.com/kxMX6QAm3t3cvJw_WpQcnXN1D5c.jpg" alt="" /> <img id="ny5" class="ny" src="http://ekladata.com/Qm5rOZltreDTfvadd7h7pkMF7cI.jpg" alt="" /> <img id="ny6" class="ny" src="http://ekladata.com/fQU9l9FmQod22lggekyB-AWqW7Q.jpg" alt="" /> <img id="ny7" class="ny" src="http://ekladata.com/ocE4TcBi4sy2G6by6jNpkGqlP1Q.jpg" alt="" /> <img id="ny8" class="ny" src="http://ekladata.com/ZU6O0XNjtIZ6PcXmgZLAGs-uPSU.jpg" alt="" /> <img id="ny9" class="ny" src="http://ekladata.com/IIjIhWIqAFkYwofdc5IV-x3LBMM.jpg" alt="" /> <img id="ny10" class="ny" src="http://ekladata.com/XGmxAMidHZyddPJINO54bU7ftRk.jpg" alt="" />
<p id="esp">Clic maintenu</p>
</div>
<style><!--
#esp{position:absolute; z-index:1; width:10vw; border:0.1vh solid black; text-align:center; font-size:1.2vw; transform:translate(25vw,10vw);}
.ny{position:absolute; z-index:1; width:17.8vw; height:33.75vw; border:0.8vh ridge grey; transform-origin:50%; filter:grayscale(1); -webkit-filter:grayscale(1); opacity:0.7; transition:all 1s linear;}
#ny1{box-sizing:border-box; transform:translate(-7.5vw,0vw) rotatey(80deg);}
#ny2{box-sizing:border-box; transform:translate(-3.5vw,0vw) rotatey(80deg);}
#ny3{box-sizing:border-box; transform:translate(0.5vw,0vw) rotatey(80deg);}
#ny4{box-sizing:border-box; transform:translate(4.5vw,0vw) rotatey(80deg);}
#ny5{box-sizing:border-box; transform:translate(8.5vw,0vw) rotatey(80deg);}
#ny6{box-sizing:border-box; transform:translate(33.5vw,0vw) rotatey(80deg);}
#ny7{box-sizing:border-box; transform:translate(37.5vw,0vw) rotatey(80deg);}
#ny8{box-sizing:border-box; transform:translate(41.5vw,0vw) rotatey(80deg);}
#ny9{box-sizing:border-box; transform:translate(45.5vw,0vw) rotatey(80deg);}
#ny10{box-sizing:border-box; transform:translate(49.5vw,0vw) rotatey(80deg);}
#ny1:active,#ny2:active,#ny3:active,#ny4:active,#ny5:active,#ny6:active,#ny7:active,#ny8:active,#ny9:active,#ny10:active{z-index:5;transform:translate(21vw,0vw) rotatey(0deg); filter:grayscale(0); -webkit-filter:grayscale(0); opacity:1;}
--></style>