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

[RhysPerez123]

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. 

[RhysPerez123]

Forgot to add this is on IMPACT theme.