Art.30A.4.21

8 images verticales au ratio 16/9. 

 

Survol

 

 

 

 

 

 

 

 

 

 

 

 

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; background: white; border:6px ridge grey;">
<p id="zc">&nbsp;</p>
<img id="cotg0" class="cot" src="http://ekladata.com/o9nuWZUG4KpgE5yxgAdfVqMqzKw.jpg">
<img id="cotd0" class="cot" src="http://ekladata.com/a3pVa3Ccngfz2V8dVzvOSHSlu1k.jpg">
<p id="zd">Survol</p>
<p id="zag1" class="za">&nbsp;</p>
<p id="zad1" class="za">&nbsp;</p>
<img id="cotg1" class="cot" src="http://ekladata.com/KoXWaNwhTk42aDq7EyR2Q6QBX3U.jpg">
<img id="cotd1" class="cot" src="http://ekladata.com/K7anGdXv3VS5YsWQFlO-9TuKWDM.jpg">
<p id="zag2" class="za">&nbsp;</p>
<p id="zad2" class="za">&nbsp;</p>
<img id="cotg2" class="cot" src="http://ekladata.com/h7WcN6I9TDlfzuh_cR0BnH1G28Q.jpg">
<img id="cotd2" class="cot" src="http://ekladata.com/VQJMw7uLxR-ys5ZD90n9V3koIdc.jpg">
<p id="zag3" class="za">&nbsp;</p>
<p id="zad3" class="za">&nbsp;</p>
<img id="cotg3" class="cot" src="http://ekladata.com/rJPpyVZteSEFgKcmudT6yl5cGe4.jpg">
<img id="cotd3" class="cot" src="http://ekladata.com/SgWCzkSGo1A5MdRkYsT5cFxFuG4.jpg">
<p id="zag4" class="za">&nbsp;</p>
<p id="zad4" class="za">&nbsp;</p>
<img id="cotg4" class="cot" src="http://ekladata.com/KSOpE9RrSnIVem1rP_73vP0YUfg.jpg">
<img id="cotd4" class="cot" src="http://ekladata.com/FqmVEWh39z5hOWr1A9x5z0TAThc.jpg">
<p id="zag5" class="za">&nbsp;</p>
<p id="zad5" class="za">&nbsp;</p>
<img id="cotg5" class="cot" src="http://ekladata.com/BiDTq-jedrFIpRE5uNEIJO1Ecuo.jpg">
<img id="cotd5" class="cot" src="http://ekladata.com/3URog2l89AqKpJlMgGcyUxonmYo.jpg">
<p id="zag6" class="za">&nbsp;</p>
<p id="zad6" class="za">&nbsp;</p>
<img id="cotg6" class="cot" src="http://ekladata.com/5jRlCl0vQAN6nmcxas420iESMHo.jpg">
<img id="cotd6" class="cot" src="http://ekladata.com/3q2Rnlp2lKTnC_w3VRkluFfzRgI.jpg">
</div>

<style><!--
#zc{position:absolute; z-index:1; width:316px; height:562px; transform:translate(342px,0px); background:url('http://ekladata.com/j_AFfOb7D08QnY4CcT_bd1fp4CI/steel3.jpg');}
.cot{position:absolute; z-index:3; width:342px; height:562px; border:6px ridge white; transition:all 1s linear;}
#cotg0{box-sizing:border-box; transform:translate(0px,0px);}
#cotd0{box-sizing:border-box; transform:translate(658px,0px);}
#zd{position:absolute; z-index:1; width:120px; font-size:30px; color:coral; text-shadow:2px 2px black; transform:translate(440px,30px);}
.za{position:absolute; z-index:5; width:60px; height:30px; border-radius:50%; background:coral; box-shadow:inset -3px -3px 5px black;}
#zag1{transform:translate(370px,100px);}
#zad1{transform:translate(560px,100px);}
#zag2{transform:translate(370px,150px);}
#zad2{transform:translate(560px,150px);}
#zag3{transform:translate(370px,200px);}
#zad3{transform:translate(560px,200px);}
#zag4{transform:translate(370px,250px);}
#zad4{transform:translate(560px,250px);}
#zag5{transform:translate(370px,300px);}
#zad5{transform:translate(560px,300px);}
#zag6{transform:translate(370px,350px);}
#zad6{transform:translate(560px,350px);}
#cotg1,#cotg2,#cotg3,#cotg4,#cotg5,#cotg6{box-sizing:border-box; transform:translate(0px,0px) rotatey(90deg);}
#cotd1,#cotd2,#cotd3,#cotd4,#cotd5,#cotd6{box-sizing:border-box; transform:translate(658px,0px) rotatey(90deg);}
#zag1:hover ~ #cotg1,#zag2:hover ~ #cotg2,#zag3:hover ~ #cotg3,#zag4:hover ~ #cotg4,#zag5:hover ~ #cotg5,#zag6:hover ~ #cotg6{z-index:5; transform:translate(0px,0px) rotatey(0deg);}
#zad1:hover ~ #cotd1,#zad2:hover ~ #cotd2,#zad3:hover ~ #cotd3,#zad4:hover ~ #cotd4,#zad5:hover ~ #cotd5,#zad6:hover ~ #cotd6{z-index:5; transform:translate(658px,0px) rotatey(0deg);}
--></style>