Vendredi

Article publié en 80vw/92vh, code ici en 60vw/69vh.

<div style="width: 60vw; height: 69vh; margin: 2vh auto; border: 0.5vh ridge white; overflow: hidden; background: url('http://ekladata.com/PsDuqeHJQk1JRLWxIBkQjhwsOy0.jpg'); background-size: 60vw 69vh;">
<p id="com">Survolez chaque bouton.</p>
<p id="dd1" class="dd">&nbsp;</p>
<p id="dd2" class="dd">&nbsp;</p>
<p id="dd3" class="dd">&nbsp;</p>
<p id="dd4" class="dd">&nbsp;</p>
<p id="dd5" class="dd">&nbsp;</p>
<p id="dd6" class="dd">&nbsp;</p>
<p id="dd7" class="dd">&nbsp;</p>
<p id="dd8" class="dd">&nbsp;</p>
<p id="ee1" class="ee">&nbsp;</p>
<p id="ee2" class="ee">&nbsp;</p>
<p id="ee3" class="ee">&nbsp;</p>
<p id="ee4" class="ee">&nbsp;</p>
<p id="ee5" class="ee">&nbsp;</p>
<p id="ee6" class="ee">&nbsp;</p>
<p id="ee7" class="ee">&nbsp;</p>
<p id="ee8" class="ee">&nbsp;</p>
<p id="ff1" class="ff">&nbsp;</p>
<p id="ff2" class="ff">&nbsp;</p>
<p id="ff3" class="ff">&nbsp;</p>
<p id="ff4" class="ff">&nbsp;</p>
<p id="ff5" class="ff">&nbsp;</p>
<p id="ff6" class="ff">&nbsp;</p>
<p id="ff7" class="ff">&nbsp;</p>
<p id="ff8" class="ff">&nbsp;</p>
</div>
<style><!--
#com{position:absolute; z-index:1; width:40vw; text-align:center; transform:translate(10vw,10vh); font-size:3vw; color:white; text-shadow:0.2vh 0.2vh black;}
.dd{position:absolute; z-index:10; width:2vw; height:2vw;}
.ee{position:absolute; z-index:2; width:2vw; height:2vw; border:0.4vh solid white;}
#dd1,#ee1{transform:translate(1vw,2vh);}
#dd2,#ee2{transform:translate(27vw,2vh);}
#dd3,#ee3{transform:translate(57vw,2vh);}
#dd4,#ee4{transform:translate(57vw,30vh);}
#dd5,#ee5{transform:translate(57vw,60vh);}
#dd6,#ee6{transform:translate(27vw,60vh);}
#dd7,#ee7{transform:translate(1vw,60vh);}
#dd8,#ee8{transform:translate(1vw,30vh);}

.ff{position:absolute; z-index:5; width:0vw; height:0vh; transition:all 1s linear;}
#ff1{background:url('http://ekladata.com/YOdoKxbNyJR4Fv10b52oCts6QjE.jpg'); background-size:60vw 69vh; transform:translate(0vw,0vh);}
#ff2{background:url('http://ekladata.com/TdMT_S5W3reu8T6miFzegO9Hy3w.jpg'); background-size:60vw 69vh; transform:translate(30vw,0vh); background-position:50% 0%;}
#ff3{background:url('http://ekladata.com/EiBeggnn9TsvAPSUcvpo3xiKDt8.jpg'); background-size:60vw 69vh; transform:translate(60vw,0vh); background-position:100% 0%;}
#ff4{background:url('http://ekladata.com/ylBbvUFI-UutkP7UztE9USnO4Kw.jpg'); background-size:60vw 69vh; transform:translate(60vw,34vh); background-position:100% 50%;}
#ff5{background:url('http://ekladata.com/2cBwy9hJkOJvwhDnxsWPheOkEFg.jpg'); background-size:60vw 69vh; transform:translate(60vw,69vh); background-position:50% 100%;}
#ff6{background:url('http://ekladata.com/pCP8iqEaAbT7kFrFkjNLeMKotPU.jpg'); background-size:60vw 69vh; transform:translate(30vw,69vh); background-position:50% 100%;}
#ff7{background:url('http://ekladata.com/WO3rNqpxQ4yqjb0RkEaE184VfpY.jpg'); background-size:60vw 69vh; transform:translate(0vw,69vh); background-position:0% 100%;}
#ff8{background:url('http://ekladata.com/Ztxp3eQF83FYH1EBH0Ymw3zA8Zo.jpg'); background-size:60vw 69vh; transform:translate(0vw,34vh); background-position:0% 50%;}
#dd1:hover ~ #ff1,#dd2:hover ~ #ff2,#dd3:hover ~ #ff3,#dd4:hover ~ #ff4,#dd5:hover ~ #ff5,#dd6:hover ~ #ff6,#dd7:hover ~ #ff7,#dd8:hover ~ #ff8{width:60vw; height:69vh;transform:translate(0vw,0vh);}
--></style>