Image hover is centred and not relative to link that is being hovered over

Question

On a website I'm working on I got images inside a container that need to appear over the text on hover. This works smooth BUT..

Whenever an image appears it stays in the same location as the previous hover. I am trying to make the images only appear over the link it is associated with but it won't work.

I have some JavaScript running to randomize the link colors.

You can find the webpage in action over here: http://bravenewfashion.com/menu.html Its on the tab titled 'Biology meets Fashion'

Answer 1

Thanks for the working example. If you nest the image inside of the a tag, it will automatically position itself next to the link. You can then add some rules for top and left to position them over the link like your website does now.

Working JSFiddle Here