css - 仕事の逆方向リンクの z-index 絶対位置画像をどのようにマスクしますか?

Question

-webkit-clip-path: polygon(0px 150px,200px 150px,100px 0px); を使用して、後方およびオーバーレイされた img (position: absolute; top:0px; left: 10px;) にリンクを含む img があります。

ただし: 可視領域の img.clip-path の下のリンクが機能しません。

この問題をどのように解決しましたか? SVG で別のレイアウトを作成できますか?

PS: リンクの z-index と position:relative が機能しません。SVG+clipPath が機能しません。

デモ: 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>