Montage3 nic

Une variante parmi d'autre, sur l'animation: l'image agrandie glisse depuis la gauche.

Clic

<div style="width: 56vw; height: 31.5vw; margin: 0vh auto; border: 0.5vh ridge grey; background: linear-gradient(to bottom, #6699cc 0%, #99ffff 100%); text-align: left;">
<p id="nick0">Clic</p>
<input id="nua1" class="nua" src="http://ekladata.com/bzA4SxGKU3clDF-yPxSuOnOBSos@175x97.jpg" type="image" /> <input id="nua2" class="nua" src="http://ekladata.com/cI3xNaWobaidEV3jRhVFJRZVqq8@175x97.jpg" type="image" /> <input id="nua3" class="nua" src="http://ekladata.com/6_2_Jmo5urYVI29zBFZ0_lO7tBc@175x97.jpg" type="image" /> <input id="nua4" class="nua" src="http://ekladata.com/CuXo2NT8316SY9Z-YhPnZzTpqD0@175x97.jpg" type="image" /> <input id="nua5" class="nua" src="http://ekladata.com/CMHrwwhBHwq0wuylPC8JbIrAINw@175x97.jpg" type="image" /> <input id="nua6" class="nua" src="http://ekladata.com/1nz03-ON29I0f8yCok5j8tdlzRk@175x97.jpg" type="image" /> <img id="cum1" class="cum" src="http://ekladata.com/bzA4SxGKU3clDF-yPxSuOnOBSos.jpg" alt="" /> <img id="cum2" class="cum" src="http://ekladata.com/cI3xNaWobaidEV3jRhVFJRZVqq8.jpg" alt="" /> <img id="cum3" class="cum" src="http://ekladata.com/6_2_Jmo5urYVI29zBFZ0_lO7tBc.jpg" alt="" /> <img id="cum4" class="cum" src="http://ekladata.com/CuXo2NT8316SY9Z-YhPnZzTpqD0.jpg" alt="" /> <img id="cum5" class="cum" src="http://ekladata.com/CMHrwwhBHwq0wuylPC8JbIrAINw.jpg" alt="" /> <img id="cum6" class="cum" src="http://ekladata.com/1nz03-ON29I0f8yCok5j8tdlzRk.jpg" alt="" /></div>

<style><!--
#nick0{position:absolute; z-index:1; width:10vw; height:3vw; transform:translate(23vw,0.5vw); text-align:center; line-height:3vw; color:red; text-shadow:0.1vh 0.1vh black; font-size:2vw; }
.nua{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black;}
#nua1{transform:translate(2vw,5vw);}
#nua2{transform:translate(20vw,5vw);}
#nua3{transform:translate(38vw,5vw);}
#nua4{transform:translate(2vw,19vw);}
#nua5{transform:translate(20vw,19vw);}
#nua6{transform:translate(38vw,19vw);}
.cum{position:absolute; z-index:100; width:100vw; height:56.25vw; left:-100vw; top:0; transition:all 1.5s linear;}
#nua1:focus ~ #cum1,#nua2:focus ~ #cum2,#nua3:focus ~ #cum3,#nua4:focus ~ #cum4,#nua5:focus ~ #cum5,#nua6:focus ~ #cum6{left:0;}
--></style>