3 clics pour 12 images

Code en 60vw par 33.75vw (60% de votre écran 16/9) d'un article publié.

Mes photos, hébergées en 1920x1080px sont dimensionnées en 60% soit 1152x648px (@1152x648.jpg)

<div id="ph0"><input id="chg1" class="chg" type="text" value="A" /><input id="chg2" class="chg" type="text" value="B" /><input id="chg3" class="chg" type="text" value="C" /><input id="chg4" class="chg" type="text" value="X" />
<p id="ph1">Clic sur chaque bouton pour afficher 4 vignettes &agrave; survoler.</p>
<p id="ph2"><img id="mg1" src="http://ekladata.com/daZ0TypzxPHHFdIFhabkH0w_6Zs@1152x648.jpg" alt="" /><img id="mg2" src="http://ekladata.com/y1U7V6QkNadDdDm7JKaVESBcfS8@1152x648.jpg" alt="" /><img id="mg3" src="http://ekladata.com/auMNZLfcTS8DMRAKQxOP0bBPfwk@1152x648.jpg" alt="" /><img id="mg4" src="http://ekladata.com/bHwVuWnb_U9F8tjwE9i2o0w47nw@1152x648.jpg" alt="" /></p>
<p id="ph3"><img id="mg5" src="http://ekladata.com/YdsDr1Ky8qrK_qSJr_3l7Lbfvvk@1152x648.jpg" alt="" /><img id="mg6" src="http://ekladata.com/Gq8L1INqXlk4LNsHTvMeZlhOF8k@1152x648.jpg" alt="" /><img id="mg7" src="http://ekladata.com/4lRVgD1DVgLHxWOTz7Q2i5Ptq4g@1152x648.jpg" alt="" /><img id="mg8" src="http://ekladata.com/HOk1JqsBQflHkk4b8I89saGe3YQ@1152x648.jpg" alt="" /></p>
<p id="ph4"><img id="mg9" src="http://ekladata.com/LRjWqQlM5uN6hKfhl2t9nmJKtJs@1152x648.jpg" alt="" /><img id="mg10" src="http://ekladata.com/eNShNOdkNFUD8UtXyRV746ZhtmQ@1152x648.jpg" alt="" /><img id="mg11" src="http://ekladata.com/FwHHiIDZQDoFT_2jzk01ION4_To@1152x648.jpg" alt="" /><img id="mg12" src="http://ekladata.com/x8gsd-8_uotoY7a-UDYY2xm7rYw@1152x648.jpg" alt="" /></p>
</div>
<style><!--
.chg{position:absolute; z-index:10; width:2vw; height:2vw; background:none; font-size:2vw; text-align:center;}
#chg1{transform:translate(57vw,1vw);}
#chg2{transform:translate(57vw,5vw);}
#chg3{transform:translate(57vw,9vw);}
#chg4{transform:translate(57vw,13vw);}
#ph0{position:relative; width:60vw; height:33.75vw; border:0.4vh ridge white; margin:2vh auto;}
#ph1{position:absolute; z-index:2; box-sizing:border-box; width:60vw; height:33.75vw; background:url('http://ekladata.com/w7Bkid7P4133g7b2IgyB6Mil7xs@1152x648.jpg'); background-size:80vw 45vw; font-size: 1.5vw; color:white!important; text-shadow:0.2vh 0.2vh black; padding:2vw 10vw 0 10vw;}
#ph2,#ph3,#ph4{position:absolute; z-index:1; width:60vw; height:33.75vw; background:linear-gradient(to bottom, rgba(255,100,100,1) 0%, rgba(200,200,0,1) 100%);transform:translate(0vw,0vw);}
#mg1,#mg5,#mg9{position:absolute; z-index:1; width:16vw; height:9vw; transform:translate(5vw,5vw); transition:all 1s linear;}
#mg2,#mg6,#mg10{position:absolute; z-index:1; width:16vw; height:9vw; transform:translate(39vw,5vw);transition:all 1s linear;}
#mg3,#mg7,#mg11{position:absolute; z-index:1; width:16vw; height:9vw; transform:translate(5vw,19vw); transition:all 1s linear;}
#mg4,#mg8,#mg12{position:absolute; z-index:1; width:16vw; height:9vw; transform:translate(39vw,19vw); transition:all 1s linear;}
#mg1:hover,#mg2:hover,#mg3:hover,#mg4:hover,#mg5:hover,#mg6:hover,#mg7:hover,#mg8:hover,#mg9:hover,#mg10:hover,#mg11:hover,#mg12:hover{position:absolute; z-index:3; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
#chg1:focus ~ #ph2,#chg2:focus ~ #ph3,#chg3:focus ~ #ph4{z-index:6;}
--></style>