Question

我已经构建了一个应用程序（使用instagram API），可将Instagram图像拉入webapp。我一直在研究一些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; }

Fiddle

图像翻转（Instagram Feed webapp）

1 个答案: