Montage 288

S
U
R
V
O
L

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<div style="width: 900px; height: 506px; margin: 5px auto; border: 1px solid black; text-align: left; background: url('http://ekladata.com/fGqT5l-fQE6bpUPMBslFCYUAm2k.jpg'); background-size: cover;">
<p id="ex">S<br />U<br />R<br />V<br />O<br />L</p>
<p id="ax1" class="ax">&nbsp;</p>
<p id="ax2" class="ax">&nbsp;</p>
<p id="ax3" class="ax">&nbsp;</p>
<p id="ax4" class="ax">&nbsp;</p>
<p id="ax5" class="ax">&nbsp;</p>
<p id="ax6" class="ax">&nbsp;</p>
<p id="ax7" class="ax">&nbsp;</p>
<p id="bx1" class="bx">&nbsp;</p>
<p id="bx2" class="bx">&nbsp;</p>
<p id="bx3" class="bx">&nbsp;</p>
<p id="bx4" class="bx">&nbsp;</p>
<p id="bx5" class="bx">&nbsp;</p>
<p id="bx6" class="bx">&nbsp;</p>
<p id="bx7" class="bx">&nbsp;</p>
<img id="vue1" class="vue" src="http://ekladata.com/f6hrd6fS1mLXxSqIyQ6fZqlzqWM.jpg" alt="" /> <img id="vue2" class="vue" src="http://ekladata.com/9c5VzeY52JncBi9ayITyL-Z6rs4.jpg" alt="" /> <img id="vue3" class="vue" src="http://ekladata.com/iZdQ3Eo7JdlHetOy5MNHx8fnokk.jpg" alt="" /> <img id="vue4" class="vue" src="http://ekladata.com/iJA3SA5N0RlfENBVnIPV1iGblKY.jpg" alt="" /> <img id="vue5" class="vue" src="http://ekladata.com/kRgA9mSt1xRE1PwuWO6NkE3YL2w.jpg" alt="" /> <img id="vue6" class="vue" src="http://ekladata.com/j9KRCv2wbqUTIu7K_3SxP3hmC7Y.jpg" alt="" /> <img id="vue7" class="vue" src="http://ekladata.com/3dLJyr838PZNJUN8w_5_XYXkJj4.jpg" alt="" /></div>

<style><!--
#ex{position:absolute; z-index:1; width:40px; height:506px; background:rgba(0,0,0,0.3); text-align:center; font-size:20px; transform:translate(860px,0px); color:white; text-shadow:1px 1px black;}
.ax{position:absolute; z-index:2; width:20px; height:20px; border:1px solid black; border-radius:50%; box-shadow:inset 3px 3px 6px black; background:lime;}
#ax1{transform:translate(870px,180px);}
#ax2{transform:translate(870px,220px);}
#ax3{transform:translate(870px,260px);}
#ax4{transform:translate(870px,300px);}
#ax5{transform:translate(870px,340px);}
#ax6{transform:translate(870px,380px);}
#ax7{transform:translate(870px,420px);}
.bx{position:absolute; z-index:10; width:20px; height:20px; border-radius:50%;}
#bx1{transform:translate(870px,180px);}
#bx2{transform:translate(870px,220px);}
#bx3{transform:translate(870px,260px);}
#bx4{transform:translate(870px,300px);}
#bx5{transform:translate(870px,340px);}
#bx6{transform:translate(870px,380px);}
#bx7{transform:translate(870px,420px);}
.vue{position:absolute; z-index:5; width:900px; height:506px; filter:sepia(1); transform:translate(0px,0px) rotatex(90deg); transition:all 1s linear 0s, filter 1s linear 1s;}
#bx1:hover ~ #vue1,#bx2:hover ~ #vue2,#bx3:hover ~ #vue3,#bx4:hover ~ #vue4,#bx5:hover ~ #vue5,#bx6:hover ~ #vue6,#bx7:hover ~ #vue7{width:900px; height:506px; filter:sepia(0);transform:rotatex(0deg);}
--></style>