Instagram 피드 용 이미지 롤 오버

Question

특정 인 그램을 가져 오는 instagram API를 사용하여 앱을 제작하고 있습니다. 각 이미지 위에 큰 하트 롤을 추가하려고합니다. 결국 이미지에 '좋아요'수가 표시됩니다. 나는 호버가 작동하고 마음이 나타 났을지라도, 이미지와 일직선 상에 있지 않더라도 (화면 그라브 참조),이 지점에 머물러 있습니다. 코드가 이미지 목록을 끌어오고 있기 때문에 개별 이미지마다 div 유형이 없습니다. 나는 그러나, 오프 "클래스"와에 "롤오버를 삽입하는 목록 내에서 사업부를 만들 않았다.

어떤 도움을이 작품이 좋지 않을까 있도록 코드를 수정하는 방법에 관해서는. 감사합니다 당신을!

{% 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}  

Answer 1

원하는 Z 인덱스 요소 위치 설정해야

을