Montage 274

6 images au ratio 16/9 ; survoler chaque lettre. La commande au clic est plus agréable et je pourrais vous proposer le code, si cela intéresse.

 

A

B

C

D

E

<div style="width: 900px; height: 506px; border: 4px solid grey; perspective: 1000; margin:5px auto; text-align:left;">
<p id="bt0">&nbsp;</p>
<p id="bt1" class="bt">A</p>
<p id="bt2" class="bt">B</p>
<p id="bt3" class="bt">C</p>
<p id="bt4" class="bt">D</p>
<p id="bt5" class="bt">E</p>
<img id="f1" class="flp" src="http://ekladata.com/VjI2u57fJ8HoNZbG17WtqCu_uTw.jpg">
<img id="f2" class="flp" src="http://ekladata.com/IuVxBwCp8NBrbihbaPOuc155lj4.jpg">
<img id="f3" class="flp" src="http://ekladata.com/xWttrSwOThLJyKQAhO1XV-NF94k.jpg">
<img id="f4" class="flp" src="http://ekladata.com/5O3n0oBIir8ASAA-af_hQgz9TD4.jpg">
<img id="f5" class="flp" src="http://ekladata.com/qeXXjy_zpQwtNSabFeheLRqNU6Y.jpg">
<img id="f6" class="flp" src="http://ekladata.com/RRmmhX3z3KcZhOX-w_GNj_fGg4g.jpg">
</div>

<style><!--
#bt0{position:absolute; z-index:2; width:50px; height:506px; background:rgba(0,0,0,0.3); transform:translate(850px,0px);}
.bt{position:absolute; z-index:5; font-size:25pt; color:white; text-shadow:2px 2px black;}
#bt1{transform:translate(865px,10px);}
#bt2{transform:translate(865px,70px);}
#bt3{transform:translate(865px,130px);}
#bt4{transform:translate(865px,190px);}
#bt5{transform:translate(865px,250px);}
.flp{position:absolute; z-index:1; transition:all 1s linear 0s; width:900px; height:506px; backface-visibility: hidden;}
#f1{transform:translate(0px,0px) rotatey(0deg);}
#f2,#f3,#f4,#f5,#f6{transform:translate(0px,0px) rotatey(-180deg);}
#bt1:hover ~ #f1, #bt2:hover ~ #f1, #bt3:hover ~ #f1, #bt4:hover ~ #f1, #bt5:hover ~ #f1{transform:translate(0px,0px) rotatey(180deg);}
#bt1:hover ~ #f2,#bt2:hover ~ #f3,#bt3:hover ~ #f4,#bt4:hover ~ #f5,#bt5:hover ~ #f6{transform:translate(0px,0px) rotatey(0deg);}
--></style>