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的圖片滾動飼料供給

回答

相關問題