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
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.