Jump to content

Different hover for all pages of a portfolio

Recommended Posts

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 🙂

1583311727_Screenshot2020-10-14at17_39_09.thumb.png.e9908c00f0eafa70049870f588f26449.png

Link to comment
  • Replies 5
  • Views 303
  • Created
  • Last Reply

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.

 

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment

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;
Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.