Art.27a.8.21

2 ème version en ronds à survoler, 5 images au ratio 16/9.

 

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/RBcACGYjJoi8Kc8dbzw7jjGQ9NQ@1000x562.jpg'); background-size: cover;">
<p id="zb">&nbsp;</p>
<img id="clp1" class="clp" src="http://ekladata.com/caY1VY_lZ88whr0JPMOHyO1O-04@1000x562.jpg" alt="" /> <img id="clp2" class="clp" src="http://ekladata.com/HMWEMEbu5EdF_9OYvBVRY-Gmhkc@1000x562.jpg" alt="" /> <img id="clp3" class="clp" src="http://ekladata.com/WVntcAG8mMzYFF9mFWr-RYgJc-s@1000x562.jpg" alt="" /> <img id="clp4" class="clp" src="http://ekladata.com/BSg3rWzWgcnw2pDWlta8kC-n9jE@1000x562.jpg" alt="" /></div>
<style><!--
#zb{position:absolute; z-index:1; width:80px; height:562px; background:rgba(255,255,255,0.5); transform:translate(920px,0px);}
.clp{position:absolute; z-index:1; width:1000px; height:562px; transition:all 1s;}
#clp1{clip-path:circle(5% at 96% 20%);}
#clp2{clip-path:circle(5% at 96% 40%);}
#clp3{clip-path:circle(5% at 96% 60%);}
#clp4{clip-path:circle(5% at 96% 80%);}
#clp1:hover,#clp2:hover,#clp3:hover,#clp4:hover{z-index:5; clip-path:circle(100% at 50% 50%);}}
--></style>