Art.30.4.21

6 images au ratio 16/9; Survol de chaque bouton.

 

 

 

 

 

 

 

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; background: white; border: 6px ridge grey;">
<p id="zes">&nbsp;</p>
<p id="ck1" class="ck">&nbsp;</p>
<img id="mf1" class="mf" src="http://ekladata.com/P0lJXhUcPS-GtUIIkbYuaLw1hl4.jpg" alt="" />
<p id="ck2" class="ck">&nbsp;</p>
<img id="mf2" class="mf" src="http://ekladata.com/9jGBtvBss4JPVf1amkfYclJW8qg.jpg" alt="" />
<p id="ck3" class="ck">&nbsp;</p>
<img id="mf3" class="mf" src="http://ekladata.com/1RebrO8cCKyoC1FDFHMX5BPRaCg.jpg" alt="" />
<p id="ck4" class="ck">&nbsp;</p>
<img id="mf4" class="mf" src="http://ekladata.com/IejYlDr8EGHXe_ani9PfDXhHuWc.jpg" alt="" />
<p id="ck5" class="ck">&nbsp;</p>
<img id="mf5" class="mf" src="http://ekladata.com/DnMYsw0oElxUZ7z7jzYruO7jQnE.jpg" alt="" />
<p id="ck6" class="ck">&nbsp;</p>
<img id="mf6" class="mf" src="http://ekladata.com/lc4p6OyKfNvMqCkzvch0ZepwJHo.jpg" alt="" /></div>

<style><!--
#zes{position:absolute; z-index:1; width:60px; height:562px; background:rgba(0,0,0,0.5); transform:translate(940px,0px);}
.ck{position:absolute; z-index:5; width:40px; height:20px; border-radius:50%; box-shadow:inset -3px -3px 6px black; background:lime;}
#ck1{transform:translate(950px,50px);}
#ck2{transform:translate(950px,100px);}
#ck3{transform:translate(950px,150px);}
#ck4{transform:translate(950px,200px);}
#ck5{transform:translate(950px,250px);}
#ck6{transform:translate(950px,300px);}
.mf{position:absolute; z-index:1; width:1000px; height:562px; transition:all 1s;}
#mf1{clip-path:polygon(15% 10%, 40% 30%, 40% 30%, 10% 40%);}
#mf2{clip-path:polygon(5% 50%, 40% 70%, 40% 70%, 20% 90%);}
#mf3{clip-path:polygon(20% 50%, 70% 20%, 70% 20%, 60% 60%);}
#mf4{clip-path:polygon(80% 10%, 90% 50%, 90% 50%, 70% 30%);}
#mf5{clip-path:polygon(80% 45%, 90% 90%, 90% 90%, 60% 70%);}
#mf6{clip-path:polygon(50% 70%, 70% 90%, 70% 90%, 40% 90%);}

#ck1:hover ~ #mf1,#ck2:hover ~ #mf2,#ck3:hover ~ #mf3,#ck4:hover ~ #mf4,#ck5:hover ~ #mf5,#ck6:hover ~ #mf6{z-index:4; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>