Montage 67

Variante en vertical; survol et clic maintenu.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
<p id="rd1" class="rd">&nbsp;</p>
<p id="rd2" class="rd">&nbsp;</p>
<p id="rd3" class="rd">&nbsp;</p>
<p id="rd4" class="rd">&nbsp;</p>
<p id="rd5" class="rd">&nbsp;</p>
<p id="rd6" class="rd">&nbsp;</p>
<p id="rd7" class="rd">&nbsp;</p>
<p id="rd8" class="rd">&nbsp;</p>
<p id="rd9" class="rd">&nbsp;</p>
<p id="rd10" class="rd">&nbsp;</p>
<p id="rd11" class="rd">&nbsp;</p>
<p id="rd12" class="rd">&nbsp;</p>
<p id="rd13" class="rd">&nbsp;</p>
<p id="rd14" class="rd">&nbsp;</p>
<p id="rd15" class="rd">&nbsp;</p>
</div>

<style><!--
.rd{position:absolute; z-index:1; width:6vw; height:14vw; border:0vh solid black; box-shadow:inset 0.3vh 0.3vh 0.4vh white, inset -0.3vh -0.3vh 0.2vh black;  filter:grayscale(1); -webkit-filter:grayscale(1); transition:all 0.5s linear;}
#rd1{background:url('http://ekladata.com/zQopN95xu6AefRtxXWfP9MMeAQA.jpg'); background-size:60vw 33.75vw;box-sizing:border-box; background-position:0vw 0vw; transform:translate(0vw,0vw);}
#rd2{background:url('http://ekladata.com/fgn8PhUKKrN4pvi5xpTnRUMdp6U.jpg'); background-size:60vw 33.75vw;box-sizing:border-box; background-position:0vw -19.75vw; transform:translate(0vw,19.75vw);}
#rd3{background:url('http://ekladata.com/AfCZ6EZWLuY_4--sdkVoOHMRjbg.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-6vw -10vw; transform:translate(6vw,10vw);}
#rd4{background:url('http://ekladata.com/4rk0ZBToCdp-o2Z7Xgb2Um075nQ.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-12vw -0vw; transform:translate(12vw,0vw);}
#rd5{background:url('http://ekladata.com/BjBncoHA73tmZNcD59MOF172DJk.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-12vw -19.75vw; transform:translate(12vw,19.75vw);}
#rd6{background:url('http://ekladata.com/EOQdcfWbc-j5bCSefV-LhFEsTxA.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-18vw -10vw; transform:translate(18vw,10vw);}
#rd7{background:url('http://ekladata.com/hGGrcEnKN_-yW80AXv1jPRVUQAU.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-24vw 0vw; transform:translate(24vw,0vw);}
#rd8{background:url('http://ekladata.com/1JluhjfY5iYnRj71KAHjZmNzseQ.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-24vw -19.75vw; transform:translate(24vw,19.75vw);}
#rd9{background:url('http://ekladata.com/00GSnmeQ6R3kZg-A9LelsfVFbiM.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-30vw -10vw; transform:translate(30vw,10vw);}
#rd10{background:url('http://ekladata.com/fE86AlxOLVHn1z7q69FxPGGgFVI.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-36vw 0vw; transform:translate(36vw,0vw);}
#rd11{background:url('http://ekladata.com/L_PEhM9QWCyAyQ2ISvonbJn6ac4.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-36vw -19.75vw; transform:translate(36vw,19.75vw);}
#rd12{background:url('http://ekladata.com/LE2XtM8YS7f_F4Iq_YTV9dptyXs.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-42vw -10vw; transform:translate(42vw,10vw);}
#rd13{background:url('http://ekladata.com/n9up2h7ov-rxuwH5yf9MZWY1Drk.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-48vw 0vw; transform:translate(48vw,0vw);}
#rd14{background:url('http://ekladata.com/8BLfykQQ3ydvvWICrsOMCcZmbNU.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-48vw -19.75vw; transform:translate(48vw,19.75vw);}
#rd15{background:url('http://ekladata.com/2PWnl1YHPufsuIjIiO9_PoPfLLo.jpg'); background-size:60vw 33.75vw; box-sizing:border-box; background-position:-54vw -10vw; transform:translate(54vw,10vw);}
#rd1:hover,#rd2:hover,#rd3:hover,#rd4:hover,#rd5:hover,#rd6:hover,#rd7:hover,#rd8:hover,#rd9:hover,#rd10:hover,#rd11:hover,#rd12:hover,#rd13:hover,#rd14:hover,#rd15:hover{z-index:10; filter:grayscale(0); -webkit-filter:grayscale(0); }
#rd1:active,#rd2:active,#rd3:active,#rd4:active,#rd5:active,#rd6:active,#rd7:active,#rd8:active,#rd9:active,#rd10:active,#rd11:active,#rd12:active,#rd13:active,#rd14:active,#rd15:active{width:60vw; height:33.75vw; background-position:0vw 0vw;transform:translate(0vw,0vw);}
--></style>