Hover Animation Image Overlay Bug (I feel like I have tried everything)

Design help Animations & Interactions
1

Hey everyone,

I have a seemingly small bug in one of my hover animations but it is driving me crazy. I have a set of CMS cards with images that have an absolutely positioned gradient overlay. I have a hover animation on each CMS item that scales down siblings, therefore highlighting the hovered item.

THE PROBLEM (Page Can be viewed here: FMI | Films)
Notice the border of the shrinking CMS items. When the siblings shrink, it appears as if they gradient doesn’t quite cover the area of the images and causes a glitchy effect on the borders. I can assure you that the gradient overlay does in fact cover the image. I even extended the overlay well past the bounds of the CMS card to be sure.

VIDEO OF BUG

Here is my public share link: [READ ONLY LINK]

2

Hi Benjamin - Select your ‘background’ div. Delete the ‘background-image.svg’ file (this doesn’t appear to be required), and then fill the background color of the div to ‘Base Black.’ This should fix the issue.