Lundi

Survol bouton pour border l'image correspondante et clic bouton pour l'agrandir.

<div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.1vh solid black; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);"><input id="q1" type="button" /><input id="q2" type="button" /><input id="q3" type="button" /><input id="q4" type="button" /><input id="q5" type="button" /><input id="q6" type="button" /><input id="q7" type="button" /><input id="q8" type="button" />
<p id="fd1">&nbsp;</p>
<p id="g1">&nbsp;</p>
<p id="g2">&nbsp;</p>
<p id="g3">&nbsp;</p>
<p id="g4">&nbsp;</p>
<p id="g5">&nbsp;</p>
<p id="g6">&nbsp;</p>
<p id="g7">&nbsp;</p>
<p id="g8">&nbsp;</p>
</div>

<style><!--
#fd1{position:absolute; width:2vw; height:33.75vw; transform:translate(58vw,0vw); background:rgba(0,0,0,0.5);}
#q1{position:absolute; z-index:5; transform:translate(58.5vw,2vw);}
#q2{position:absolute; z-index:5; transform:translate(58.5vw,5vw);}
#q3{position:absolute; z-index:5; transform:translate(58.5vw,8vw);}
#q4{position:absolute; z-index:5; transform:translate(58.5vw,11vw);}
#q5{position:absolute; z-index:5; transform:translate(58.5vw,14vw);}
#q6{position:absolute; z-index:5; transform:translate(58.5vw,17vw);}
#q7{position:absolute; z-index:5; transform:translate(58.5vw,20vw);}
#q8{position:absolute; z-index:5; transform:translate(58.5vw,23vw);}

#q1:hover,#q2:hover,#q3:hover,#q4:hover,#q5:hover,#q6:hover,#q7:hover,#q8:hover{background:red!important;}
#q1:hover ~ #g1,#q2:hover ~ #g2,#q3:hover ~ #g3,#q4:hover ~ #g4,#q5:hover ~ #g5,#q6:hover ~ #g6,#q7:hover ~ #g7,#q8:hover ~ #g8{border:1vh solid white;}

#g1{position:absolute; z-index:1; box-sizing:border-box; transition:transform 1s linear, border 0s linear, width 1s linear,height 1s linear; width:9vw; height:16vw;  transform:translate(2vw,1vw); background:url('http://ekladata.com/oZjzqHrB3nkw66t9H0ppp1BbZwk.jpg'); background-size:cover; }
#g2{position:absolute; z-index:1; box-sizing:border-box; transition:transform 1s linear, border 0s linear, width 1s linear,height 1s linear; width:9vw; height:16vw; transform:translate(15vw,1vw); background:url('http://ekladata.com/3iC5iYxHd5hBC7zv9yasG4OL630.jpg'); background-size:cover; }
#g3{position:absolute; z-index:1; box-sizing:border-box; transition:transform 1s linear, border 0s linear, width 1s linear,height 1s linear; width:22vw; height:12vw; transform:translate(1vw,18vw); background:url('http://ekladata.com/wa6jJdYupZqf0EzARofgf9AVI2E.jpg'); background-size:cover; }
#g4{position:absolute; z-index:1; box-sizing:border-box; transition:transform 1s linear, border 0s linear, width 1s linear,height 1s linear; width:9vw; height:16vw; transform:translate(26vw,0.5vw); background:url('http://ekladata.com/yVkj_TBgQIdqsZx4DZBROG5ObSg.jpg'); background-size:cover; }
#g5{position:absolute; z-index:1; box-sizing:border-box; transition:transform 1s linear, border 0s linear, width 1s linear,height 1s linear; width:9vw; height:16vw; transform:translate(26vw,17vw); background:url('http://ekladata.com/_oNZn_9WL7urlm5L_70PKQKoLBw.jpg'); background-size:cover;}
#g6{position:absolute; z-index:1; box-sizing:border-box; transition:transform 1s linear, border 0s linear, width 1s linear,height 1s linear; width:9vw; height:16vw;  transform:translate(38vw,1vw); background:url('http://ekladata.com/ertI7yRVz6lfbATb_Kovs_ax9aw.jpg'); background-size:cover;}
#g7{position:absolute; z-index:1; box-sizing:border-box; transition:transform 1s linear, border 0s linear, width 1s linear,height 1s linear; width:9vw; height:16vw; transform:translate(48vw,1vw); background:url('http://ekladata.com/PTyP0C23abwUFTu0UQmOLQreIYs.jpg'); background-size:cover; }
#g8{position:absolute; z-index:1; box-sizing:border-box; transition:transform 1s linear, border 0s linear, width 1s linear,height 1s linear; width:22vw; height:12vw; transform:translate(36vw,18vw); background:url('http://ekladata.com/hvNcF7nyEzHXL9dXs0kdNCOYnhM.jpg'); background-size:cover; }

#q1:focus ~ #g1,#q2:focus ~ #g2,#q4:focus ~ #g4,#q5:focus ~ #g5,#q6:focus ~ #g6,#q7:focus ~ #g7{z-index:2; width:20vw; height:33.75vw; transform:translate(20vw,0vw); border:none;}
#q3:focus ~ #g3,#q8:focus ~ #g8{z-index:2; width:60vw; height:33.75vw; transform:translate(0vw,0vw); border:none;}
--></style>