Instagram的图片滚动饲料供给

我正在构建一个应用程序使用instagram API拉入某些instagrams。我试图在每个图像上添加一个大的心脏图像，最终显示图像收到的“喜欢”数量。我被困在这一点，因为即使悬停工作和心脏显示，他们不符合（和在图像之上）（见screengrab）。我没有任何形式的每个单独的图像div，因为代码只是拉入图像列表。我没有然而，在列表中创建一个div插入翻转“上和‘关’类。 Screengrab of current view on hover Instagram的图片滚动饲料供给

任何帮助就如何修改代码以使这项工作将是真棒，谢谢你！

{% for i in instagrams %}    
<ul> 
    <li id= 'instagram'> 
    <div class="roll">  
     <IMG class="on" img src='{{i[0]}}'> 
     <IMG class="off" img src="http://f.cl.ly/items/321322043C0Y2g0R2K0g/smallerheart.jpg"> 
    </div>  
    <div id ="caption">{{i[1]}}</div> 
</li>

{％ENDFOR％}

img { 
    width: 300px; 
    height: 300px; 
    padding: 1px; 
    background-color: white;} 

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

li#instagram { 
    float: left; 
    display: ; 
    margin-bottom: 20px; 
    background-color: white; 
    z-index:1}

来源

2013-06-21 Radha Kapoor

您需要设置像Z-索引的元素的位置：

position: relative;

来源

2013-06-21 17:49:15

感谢您的回复，但我不确定我是否遵守 - 我只是想要掩盖图像......我仍然需要说明相对的位置？ –

如果未指定该元素的位置，则z-index将不适用于元素。看到这里： http://www.w3schools.com/CSSref/pr_pos_z-index.asp 你可以申请一个相对，固定或绝对的位置，取决于你想要完成的。 –

这样的东西http://jsfiddle.net/KVDu9/3/，对不对？ –

Instagram的图片滚动饲料供给

回答

相关问题