Art.31a.7.21

7 images au ratio 16/9.

Survol

 

 

 

 

 

 

*******************
<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/7xfLR50WVQbxf4rPBW0U_oA2Uck@1000x562.jpg'); background-size: cover;">
<p id="sv0">Survol</p>
<p id="sv1" class="sv">&nbsp;</p>
<p id="sv2" class="sv">&nbsp;</p>
<p id="sv3" class="sv">&nbsp;</p>
<p id="sv4" class="sv">&nbsp;</p>
<p id="sv5" class="sv">&nbsp;</p>
<p id="sv6" class="sv">&nbsp;</p>
<img id="svl1" class="svl" src="http://ekladata.com/2vm7-43L7_AoyIALeiYzoyLfOxw@1000x562.jpg" alt="" /> <img id="svl2" class="svl" src="http://ekladata.com/wR6fyWyt9bAnqyBuKpdZ2mzFBdk@1000x562.jpg" alt="" /> <img id="svl3" class="svl" src="http://ekladata.com/Am8oOchuOSj-1AhaGPApfIgfIAU@1000x562.jpg" alt="" /> <img id="svl4" class="svl" src="http://ekladata.com/Md9BeJKkrhS5GYG1VLAF_lg_Gpo@1000x562.jpg" alt="" /> <img id="svl5" class="svl" src="http://ekladata.com/7YxvwjKcZ3cstyR6i4e27vpEMlY@1000x562.jpg" alt="" /> <img id="svl6" class="svl" src="http://ekladata.com/OUUQRdZzksFO32t4f_B0F9u_rEc@1000x562.jpg" alt="" /></div>
<style><!--
#sv0{position:absolute; z-index:1; width:100px; font-size:25px; color:white; text-shadow:1px 1px black; transform:translate(900px,10px);}
.sv{position:absolute; z-index:5; width:30px; height:50px; border:2px solid white;}
#sv1{transform:translate(966px,80px);}
#sv2{transform:translate(966px,150px);}
#sv3{transform:translate(966px,220px);}
#sv4{transform:translate(966px,290px);}
#sv5{transform:translate(966px,360px);}
#sv6{transform:translate(966px,430px);}
.svl{position:absolute; z-index:1; width:1000px; height:562px; opacity:0; filter:grayscale(1); transition:filter 1s 0.5s;}
.sv:hover{border: 2px solid red;}
#sv1:hover ~ #svl1,#sv2:hover ~ #svl2,#sv3:hover ~ #svl3,#sv4:hover ~ #svl4,#sv5:hover ~ #svl5,#sv6:hover ~ #svl6{opacity:1; filter:grayscale(0);}
--></style>