How mask z-index absolute position image for work backward link?

Question

I have a img with link on backward and overlayered img (position: absolute; top:0px; left: 10px;) with -webkit-clip-path: polygon(0px 150px,200px 150px,100px 0px);.

But: link under img.clip-path in visible area not work.

How solved this problem? May be creale another layout with SVG?

PS: z-index and position:relative for link not work. SVG+clipPath not work.

Demo: http://jsfiddle.net/9fjv4wbr/

img { width: 220px;  margin: 20px; }
img:hover { opacity: 0.5; }

.absolute { position: absolute; top:0px; left: 10px; }
.back { width: 600px; }

.clip-polygon {
  -webkit-clip-path: polygon(0px 150px,200px 150px,100px 0px);
}

body {
  background: linear-gradient(
    to bottom,
    #999,
    #eee
  );
}

body, html {
  height: 100%;
}

<a href="http://www.google.com/"><img src="http://testp.infinityyazilim.com/IlkayOzturk/img/title_mentor.png" class="back"></a>
    
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="absolute clip-polygon"></a>

If the question is what I *think* it is (the hover on the polygon is not restricted to the clipped area) then I think this a bug - https://code.google.com/p/chromium/issues/detail?id=468613 — Paulie_D, Sep 07 '15 at 10:23
I just need working link UNDER img with absolute position out png's alpha area (or out cliping area). [link](https://yadi.sk/i/bpZN7yRwiv9o5) — Max Tusken, Sep 07 '15 at 10:46
You have an error "Refused to display 'https://www.google.com' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." — Madalina Taina, Sep 07 '15 at 10:48
Or maybe it helps this http://stackoverflow.com/questions/20498831/refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin — Madalina Taina, Sep 07 '15 at 10:50
**Please**, see picture and you understand - https://yadi.sk/i/bpZN7yRwiv9o5 — Max Tusken, Sep 08 '15 at 06:38

How mask z-index absolute position image for work backward link?

0 Answers0