css - Image Roll Over (Instagram Feed webapp) -

I created an app (using the Instagram API) which pulls the Instagram image into a web app, I work on some CSS code I am doing the show which shows the heart of the big heart on the hover (which will eventually show the number of "likes" that the image is getting).

My question is - how to make heart an overlay on instagram so that the outline of the instagram image is still visible behind the heart size on the hover?

Any help is super appreciated! Thank you.

  & lt; Div class = "roll" & gt; & Lt; Img class = "at" src = "http://f.cl.ly/items/3s0M340B2I0a171l0H1o/testinstagram_image2.jpg" & gt; & Lt; Img class = "off" src = "http://f.cl.ly/items/321322043C0Y2g0R2K0g/smallerheart.jpg" & gt; & Lt; / Div & gt; & Lt; STYLE type = "text / css" & gt; .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; } & Lt; / STYLE & gt;    
 
 
 . Roll {width: 360px;} .roll {height: 330px;} roll {background: blue;} .roll .on {dislay: block; } .roll .off {display: none; } .roll: hover .off {z-index: 0; Status: Absolute; Top: 25px; Left: 8 pixels; Display area; } .roll: hover .on {z-index: 10; Display area; }