How to add a half gradient overlay to media grid when hovering?

Technical Q&A

Topic summary

Request: Implement a 20° hover gradient overlay on media-grid items that appears on hover and disappears on mouseout, with a different gradient color for each image, replicating the “Our Products” effect seen on slumberdown.co.uk.

Context: Being built on the Impact theme; a live preview of the current site (enoracare.com) is provided to show where the effect should be applied.

Details: Seeks a “half gradient” overlay at a fixed angle, triggered only on hover, and per-item color customization (each image uses its own gradient color). No code or current attempt was shared.

References: External site examples are central to understanding the desired styling and interaction.

Status: No solution or guidance provided yet; the question remains open, asking for a CSS-based approach compatible with the Impact theme and per-image gradient configuration.

Summarized with AI on January 8. AI used: gpt-5.
1

Hello, I am trying to recreate the hover gradient effect (on the '‘our products’ section) so that when hovering over the media grid a gradient appears at a 20degree angle. Would it also be possible to have multiple colours for each image?

Website Preview: https://enoracare.com/?_ab=0&_fd=0&_sc=1

Goal of what I want: https://www.slumberdown.co.uk

You can see that when you hover the gradient appears then dissapears after hovering & also each image has a different colour to the gradient.

Thank you in advance for the help. I cant seem to figure it out myself.

2

Forgot to add this is on IMPACT theme.