Clip 4

Survolez chaque image.

Code.
Chaque image est une sélection en polygone de la grande image.

<div style="height: 600px; width: 800px;">
<p id="ay1"><img src="http://ekladata.com/238Ws4dm6F6B8bgglRfOIpdkTHg/y1.jpg" alt="" /></p>
<p id="ay2"><img src="http://ekladata.com/wI670z9NucLXa6vEtUe5Xn8GcFs/y2.jpg" alt="" /></p>
<p id="ay3"><img src="http://ekladata.com/EOkY2Yh7dzmfCI-HhQgC-PLREEE/y3.jpg" alt="" /></p>
</div>

<style><!--
#ay1{ transition:all 1s linear; position:absolute; transform:translate(0px,0px); width:800px; height:600px; -webkit-clip-path: polygon(400px 0px, 600px 200px, 400px 400px, 200px 200px);}
#ay2{ transition:all 1s linear; position:absolute; transform:translate(410px,0px); width:800px; height:600px; -webkit-clip-path: polygon(400px 0px, 600px 200px, 400px 400px, 200px 200px);}
#ay3{ transition:all 1s linear; position:absolute; transform:translate(205px,210px); width:800px; height:600px; -webkit-clip-path: polygon(400px 0px, 600px 200px, 400px 400px, 200px 200px);}
#ay1:hover{ transform:translate(200px,0px); z-index:5; -webkit-clip-path: polygon(0px 0px, 800px 0px, 800px 600px, 0px 600px); clip-path: polygon(0px 0px, 800px 0px, 800px 600px, 0px 600px);}
#ay2:hover{ transform:translate(200px,0px); z-index:5; -webkit-clip-path: polygon(0px 0px, 800px 0px, 800px 600px, 0px 600px); clip-path: polygon(0px 0px, 800px 0px, 800px 600px, 0px 600px);}
#ay3:hover{ transform:translate(200px,0px); z-index:5; -webkit-clip-path: polygon(0px 0px, 800px 0px, 800px 600px, 0px 600px); clip-path: polygon(0px 0px, 800px 0px, 800px 600px, 0px 600px);}
--></style>
...
Au survol, l'image reprend ses dimensions de 800x600px.
...