Lunaire 4

Code à adapter à vos goûts; commande au clic.

La forme des vignettes peut être modifiée; l'agrandissement se fait par rapport à la partie visible de l'image, dans la vignette.

Mon blog est structuré sans colonne latérale à droite ce qui me permet de positionner le montage par rapport au bord gauche, en position absolute.

Si vous avez une colonne à droite, vous pouvez positionner votre montage en tenant compte de la largeur de votre colonne et décaler d'autant la position de votre montage.

L'agrandissement se fait par left:0; pour le coller au bord gauche et en z-index:100; pour passer au dessus des colonnes.

Mes images, au ratio 16/9, sont hébergées sur Ekla en 1920x1080px.

<div style="width: 63vw; height: 20vw; margin: 0 0 0 10vw;"><input id="cc1" class="cc" type="text" /> <input id="cc2" class="cc" type="text" /> <input id="cc3" class="cc" type="text" /> <input id="cc4" class="cc" type="text" /> <input id="cc5" class="cc" type="text" /> <input id="cc6" class="cc" type="text" /> <input id="cc7" class="cc" type="text" /> <input id="cc8" class="cc" type="text" />
<p id="mg1" class="mg">&nbsp;</p>
<p id="mg2" class="mg">&nbsp;</p>
<p id="mg3" class="mg">&nbsp;</p>
<p id="mg4" class="mg">&nbsp;</p>
<p id="mg5" class="mg">&nbsp;</p>
<p id="mg6" class="mg">&nbsp;</p>
<p id="mg7" class="mg">&nbsp;</p>
<p id="mg8" class="mg">&nbsp;</p>
</div>
<style><!--
.cc{position:absolute; z-index:10; left:10vw; width:7vw; height:15vw; background:transparent; border:none; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white;}
#cc1{transform:translate(0.5vw,0vw);}
#cc2{transform:translate(8.5vw,0vw);}
#cc3{transform:translate(16.5vw,0vw);}
#cc4{transform:translate(24.5vw,0vw);}
#cc5{transform:translate(32.5vw,0vw);}
#cc6{transform:translate(40.5vw,0vw);}
#cc7{transform:translate(48.5vw,0vw);}
#cc8{transform:translate(56.5vw,0vw);}
.mg{position:absolute; z-index:1; width:7vw; height:15vw; transition:all 1.5s linear;}
#mg1{background:url('http://ekladata.com/A20lH9BtAHPNhLflhiumS8BCw8E.jpg');background-position:-10.5vw 0vw; background-size:100vw 56.25vw; left:10vw; transform:translate(0.5vw,0vw);}
#mg2{background:url('http://ekladata.com/_AAruAvPSqeJHsteNfQ5Fr-r-Y0.jpg');background-position:-18.5vw 0vw; background-size:100vw 56.25vw; left:10vw; transform:translate(8.5vw,0vw);}
#mg3{background:url('http://ekladata.com/mX_RN04xUBV3N471Ts0gz_-jMLg.jpg');background-position:-26.5vw 0vw; background-size:100vw 56.25vw; left:10vw; transform:translate(16.5vw,0vw);}
#mg4{background:url('http://ekladata.com/9nIHkcPqO2jonioOko7QsP_Ssx4.jpg');background-position:-34.5vw 0vw; background-size:100vw 56.25vw; left:10vw; transform:translate(24.5vw,0vw);}
#mg5{background:url('http://ekladata.com/weoWCuwBAr88EeZxGBs38nSbNho.jpg');background-position:-42.5vw 0vw; background-size:100vw 56.25vw; left:10vw; transform:translate(32.5vw,0vw);}
#mg6{background:url('http://ekladata.com/xszVnKC41k7ZiKJvvbmuV9k6W_s.jpg');background-position:-50.5vw 0vw; background-size:100vw 56.25vw; left:10vw; transform:translate(40.5vw,0vw);}
#mg7{background:url('http://ekladata.com/YFX-PM2ksYHRwidoHYJgGPxJWz0.jpg');background-position:-58.5vw 0vw; background-size:100vw 56.25vw; left:10vw; transform:translate(48.5vw,0vw);}
#mg8{background:url('http://ekladata.com/6RriZ8B0XfGeKs-xwTtBXpE49S4.jpg');background-position:-66.5vw 0vw; background-size:100vw 56.25vw; left:10vw; transform:translate(56.5vw,0vw);}
#cc1:focus ~ #mg1,#cc2:focus ~ #mg2,#cc3:focus ~ #mg3,#cc4:focus ~ #mg4,#cc5:focus ~ #mg5,#cc6:focus ~ #mg6,#cc7:focus ~ #mg7,#cc8:focus ~ #mg8{z-index:100; left:0; transform:translate(0vw,0vw); width:100vw; height:56.25vw; background-position:0vw 0vw;}
--></style>