Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
drawingonblank

York Theme - How can I make the index images greyscale but color on mouseover / hover?

Question

Hi!

I'm trying to code an index page's images to all be greyscale until you hover or mouseover them. Is this possible? I feel like this is a fairly simple fix but I can't figure it out looking at the inspector.

Edited by drawingonblank
Initial Revision

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

@drawingonblank First, you need to find Index Page ID. See how to: https://beaverhero.com/squarespace-how-to/#HowtoFindPageIDThen Add to Home > Design > Custom CSS


body#collection-563bea6ae4b0ccc59db69084 img {
       -webkit-filter: grayscale(100%);
       filter: grayscale(100%);
   }
body#collection-563bea6ae4b0ccc59db69084 img:hover {
       -webkit-filter: none;
       filter: none;
   }




Edited by tuanphan
Initial Revision

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

I'm overloading. Will reply all questions this month.

Share this post


Link to post
  • 0

@drawingonblank body#collection-563bea6ae4b0ccc59db69084 is ID (in example i sent above).

Add all code (replace body#...084 with your page id), and insert to Home > Design > Custom CSS


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

I'm overloading. Will reply all questions this month.

Share this post


Link to post
  • 0

@tuanphan could I use this code and modify it somehow to make the index thumbnail change to a different image on hover?

Edited by kmast

Share this post


Link to post
  • 0
5 hours ago, kmast said:

@tuanphan could I use this code and modify it somehow to make the index thumbnail change to a different image on hover?

Try https://www.mybilliedesigns.com/blog/squarespace-customization-html-hover-effect


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

I'm overloading. Will reply all questions this month.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...