hover image appears below placeholder instead of overlayed

Question

I used padding-bottom calc to stop my text jumping around while the placeholder loaded. This worked, however the hover image which is supposed to display over the top of the placeholder, now appears below it.

Ive tried many things and keep messing it up further. Here is a fiddle showing the issue JSFiddle

Im not sure why the placeholder is so small in this demo but it appears fine on my page. I am also trying to make the hover image remain as the active image until the next category link is hovered.

Answer 1

I solved this by removing the figure element around the image and applying style="padding-bottom: calc((height/width)*100%); position: relative" to the <div class="img_container" instead, which contains both the placeholder and the hover image.