Jump to content

Change portfolio grid images to greyscale which revert to full colour on hover

Go to solution Solved by Ziggy,

Recommended Posts

Hello

I have the 'Grid: Overlay' layout option selected on my portfolio page. I would like the thumbnail images to start as greyscale and return to full colour on when hovered.

Additionally i would like the grid to be full width. Currently there is a slight border even with 'width: full' selected.

Is there some simple custom CSS to do this?

Thank you in advance!

 

Link to comment
  • Replies 2
  • Views 523
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

Yes, use this Custom CSS:

.portfolio-grid-overlay .grid-item .grid-image {
  filter: grayscale(1);
  transition:ease-in-out 300ms;
}
.portfolio-grid-overlay .grid-item:hover {
  .grid-image {
    filter: grayscale(0);
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.