html - Image Roll Overs for Instagram Feed -

I am creating an app using the instagram API which pulls in some instagram. I am trying to add a big heart roll on each image which will eventually display the number of 'likes' that received the image. I am stuck at this point, even if the hover works and the heart is displayed, they are not compatible with the images (and upwards) (see screengrab). I do not have any type of device for each individual image, because the code is dragging in the list of images, however, I made a developer in the class to include the "rollover" and "closed" class in the class. img {width: 300px; height: 300px; padding: 1px; background-color: white;} .roll .roll {width: 300px;} .roll {height: 300px;} Roll {background: blue;} .roll .on {display: bloc K;} .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}

You need to set a status on z-linked elements such as:

  Status: Relative;