Different hover for all pages of a portfolio

Site URL: https://www.guarnizioni-ghirardelli.com/prodotti

Hello all, I'm currently finalising a site ( https://www.guarnizioni-ghirardelli.com/prodotti ) and I am using the Falodu template.

What I'd like to achieve is to have a different hover state for each thumbnail of the portfolio items.
At the moment, all pages have a solid yellow overlay, but I was wondering if somehow it's possible to trigger/have a different overlay (specifically a picture or potentially an SVG) for each page/item of the portfolio grid.

I've attached a screenshot as it might illustrate what I'd like to achieve in a much better way

Thank you in advance 🙂

This is possible. I solved for some members.

You want to use custom color or custom image on hover? We can check easier.

Hi Tuanphan, I'd like to be able to have custom image on hover if it's possible

On 10/16/2020 at 8:53 AM, tuanphan said:

This is possible. I solved for some members.

You want to use custom color or custom image on hover? We can check easier.

Add to Home > Design > Custom CSS. Repeat similar for other items

a.grid-item[href*="guarnizioni-standard"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="guarnizioni-standard"]:hover .grid-image-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
}

12 hours ago, tuanphan said:

Add to Home > Design > Custom CSS. Repeat similar for other items

a.grid-item[href*="guarnizioni-standard"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="guarnizioni-standard"]:hover .grid-image-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
}

 

Oh my sweet lord this is awesome, thank you so much Tuan!

I have loaded the custom files (jpg format as for some bizarre reason I can't load any SVG) and the only issue I have left is the scaling of the picture. I've initially loaded everything with a 16:9 ratio, but, depending on the size of my browser the pictures get tiled.

All resolved, I just made to match all the loaded jpg to the cover size and stopped the tile/repetition.
Thank you again for your help Tuan 🙂

background-position: center;
background-repeat: no-repeat;
background-size: cover;