Hover & animation not (always) working together

Hi all, this is my first site so the issue here may be due to something I built incorrectly from the start…

I have an index page with a grid of thumbnails that link to each of my portfolio projects. I would like the hover animation (transparent yellow bar grows and shrinks over thumbnail image) to align to the thumbnail that is hovered over. It works on the first row only, when lower rows are hovered the animation plays in the same column but still only ever in the first row.

I think it is something to do with Absolute positioning, but that is the only way I could get the yellow div to overlay the thumb image. The site is not live yet so read-only link is below, if there is anything else I can provide or explain please ask…

Thanks in advance!

Here is my public share link: