css - 图片翻转（Instagram Feed webapp）

Question

我已经构建了一个应用程序（使用 instagram API），它将 instagram 图像拉入 web 应用程序。我一直在研究一些 CSS 代码，它在悬停时显示一个大心脏的翻转（最终将显示图像收到的“喜欢”的数量）。

我的问题是 - 如何让心形叠加在 Instagram 上，以便在悬停时在心形后面仍然可以看到 Instagram 图像的轮廓？

任何帮助都非常感谢！谢谢。

<DIV class="roll">
<IMG class="on"  src="http://f.cl.ly/items/3s0M340B2I0a171l0H1o/testinstagram_image2.jpg">
<IMG class="off" src="http://f.cl.ly/items/321322043C0Y2g0R2K0g/smallerheart.jpg">
</DIV>


<STYLE type="text/css">
.roll {width: 360px;}
.roll {height: 330px;}
.roll {background: blue;}
.roll .on { dislay: block; }
.roll .off { display: none; }
.roll:hover .on { display: none; }
.roll:hover .off { display: block; }
</STYLE>

Answer 1

.roll {width: 360px;}
.roll {height: 330px;}
.roll {background: blue;}
.roll .on { dislay: block; }
.roll .off { display: none; }
.roll:hover .off { z-index: 0;position:absolute; top:25px; left: 8px; display: block; }
.roll:hover .on {z-index: 10; display: block; }

小提琴