Montage 296

Survol

<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left; border: 1px solid black; background:radial-gradient(ellipse at center, rgba(192,192,192,1) 0%, rgba(255,255,255,1) 50%, rgba(128,128,128,1) 100%);/><img id="hg1" class="hg" src="http://ekladata.com/WkxoPoZYSabi6gx-mnp2czJOpGM.jpg" alt="" /> <img id="hg2" class="hg" src="http://ekladata.com/lgOx8C9vFA_YaSaKz97s7-XAXY0.jpg" alt="" /> <img id="hg3" class="hg" src="http://ekladata.com/l_zF-863eZE0ZDQCZKahEMkuhEM.jpg" alt="" /> <img id="hg4" class="hg" src="http://ekladata.com/XRtD6F75yODsiSK_0suFOP0DuF0.jpg" alt="" /> <img id="hg5" class="hg" src="http://ekladata.com/2-WEqYem4auM-hL1P4vPV_m5aR4.jpg" alt="" /> <p id="hg6">Survol</p></div>

<style><!--

#hg6{position:absolute; z-index:1; width:100px; font-size:25px; transform:translate(400px,20px);}

.hg{position:absolute; z-index:1; width:900px; height:506px; transition:all 1s linear;}

#hg1{clip-path: circle(30% at 0% 0%); -webkit-clip-path: circle(30% at 0% 0%);}

#hg2{clip-path: circle(30% at 100% 0%); -webkit-clip-path: circle(30% at 100% 0%);}

#hg3{clip-path: circle(30% at 100% 100%); -webkit-clip-path: circle(30% at 100% 100%);}

#hg4{clip-path: circle(30% at 0% 100%); -webkit-clip-path: circle(30% at 0% 100%);}

#hg5{clip-path: ellipse(250px 150px at 50% 50%); -webkit-clip-path: ellipse(250px 150px at 50% 50%);} 

#hg1:hover,#hg2:hover,#hg3:hover,#hg4:hover,#hg5:hover{z-index:5; clip-path: circle(150% at 0% 0%); -webkit-clip-path: circle(150% at 0% 0%);}

#hg5:hover{z-index:5; clip-path: ellipse(900px 506px at 50% 50%); -webkit-clip-path: ellipse(900px 506px at 50% 50%);}

--></style>