Image Roll Overs for Instagram Feed

Question

I'm building an app using the instagram API which pulls in certain instagrams. I'm trying to add a large heart roll over on each image which will eventually display the number of 'likes' the image has received. I'm stuck at this point as even though the hover works and the hearts display, they aren't in line with (and on top of) the images (see screengrab). I don't have any sort of div for each individual image as the code is just pulling in a list of images. I did however, create a div within the list to insert the rollover "on and "off" classes.

Any help as to how to modify the code to make this work would be awesome. Thanks you!

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

You need to set a position on z-indexed elements like:

position: relative;