La porte

..

Survolez chaque bouton.

<p style="text-align: center;"><span style="font-size: 14pt; background-color: #ffff00;"><strong>Survolez chaque bouton.</strong></span></p>
<div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 1vh ridge grey; background: url('http://ekladata.com/uvdmDqzNvCF3nkpCHyD34mc5bqY.jpg'); background-size: 80vw 92vh;">
<p id="flbt1" class="flbt">&nbsp;</p>
<p id="fl1a" class="fl1">&nbsp;</p>
<p id="fl1b" class="fl1">&nbsp;</p>
<p id="flbt2" class="flbt">&nbsp;</p>
<p id="fl2a" class="fl2">&nbsp;</p>
<p id="fl2b" class="fl2">&nbsp;</p>
<p id="flbt3" class="flbt">&nbsp;</p>
<p id="fl3a" class="fl3">&nbsp;</p>
<p id="fl3b" class="fl3">&nbsp;</p>
<p id="flbt4" class="flbt">&nbsp;</p>
<p id="fl4a" class="fl4">&nbsp;</p>
<p id="fl4b" class="fl4">&nbsp;</p>
<p id="flbt5" class="flbt">&nbsp;</p>
<p id="fl5a" class="fl5">&nbsp;</p>
<p id="fl5b" class="fl5">&nbsp;</p>
<p id="flbt6" class="flbt">&nbsp;</p>
<p id="fl6a" class="fl6">&nbsp;</p>
<p id="fl6b" class="fl6">&nbsp;</p>
<p id="flbt7" class="flbt">&nbsp;</p>
<p id="fl7a" class="fl7">&nbsp;</p>
<p id="fl7b" class="fl7">&nbsp;</p>
</div>
<hr />
<p style="text-align: center;">...</p>
<style><!--
.flbt{position:absolute; z-index:10; width:1.5vw; height:5vh; border-radius:1vh 0 0 1vh; border:0.1vh solid black; background:linear-gradient(to bottom,red 0%, yellow 100%);}
.flbt:hover{background:linear-gradient(to bottom,green 0%, yellow 100%);}
#flbt1{transform:translate(78.4vw,5vh);}
#flbt2{transform:translate(78.4vw,15vh);}
#flbt3{transform:translate(78.4vw,25vh);}
#flbt4{transform:translate(78.4vw,35vh);}
#flbt5{transform:translate(78.4vw,45vh);}
#flbt6{transform:translate(78.4vw,55vh);}
#flbt7{transform:translate(78.4vw,65vh);}
.fl1{background:url('http://ekladata.com/bAuGYaC1lFbSH-MTcbu-NDND150.jpg'); background-size:80vw 92vh;}
.fl2{background:url('http://ekladata.com/AlK_PL_ygAuxFMkJYZxg1qqJEpQ.jpg'); background-size:80vw 92vh;}
.fl3{background:url('http://ekladata.com/TvOoNAdze5usfnWT_vV-Aia9seg.jpg'); background-size:80vw 92vh;}
.fl4{background:url('http://ekladata.com/xaDjQpcbdv80-mgJy8M58kmVPgQ.jpg'); background-size:80vw 92vh;}
.fl5{background:url('http://ekladata.com/c5Lz8oRcpmozGU3iLhvmnxGlqDg.jpg'); background-size:80vw 92vh;}
.fl6{background:url('http://ekladata.com/MgHE5uKQkmUX84S2h6jrs0b5clE.jpg'); background-size:80vw 92vh;}
.fl7{background:url('http://ekladata.com/2X40YovJ6WWk0VDXO1fZPjTnsT4.jpg'); background-size:80vw 92vh;}
#fl1a,#fl2a,#fl3a,#fl4a,#fl5a,#fl6a,#fl7a{position:absolute; z-index:1; width:0vw; height:92vh; transform:translate(0vw,0vh); background-position:0vw 0vh; transition:all 1s linear;}
#fl1b,#fl2b,#fl3b,#fl4b,#fl5b,#fl6b,#fl7b{position:absolute; z-index:1; width:0vw; height:92vh; transform:translate(80vw,0vh); background-position:-80vw 0vh; transition:all 1s linear;}
#flbt1:hover ~ #fl1a,#flbt2:hover ~ #fl2a,#flbt3:hover ~ #fl3a,#flbt4:hover ~ #fl4a,#flbt5:hover ~ #fl5a,#flbt6:hover ~ #fl6a,#flbt7:hover ~ #fl7a{width:40vw;}
#flbt1:hover ~ #fl1b,#flbt2:hover ~ #fl2b,#flbt3:hover ~ #fl3b,#flbt4:hover ~ #fl4b,#flbt5:hover ~ #fl5b,#flbt6:hover ~ #fl6b,#flbt7:hover ~ #fl7b{width:40vw; transform:translate(40vw,0vh); background-position:-40vw 0vh;}
--></style>