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

Portfolio grid greyscale to colour hover effect


Voila
Go to solution Solved by tuanphan,

Question

  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Thank you so much!

Site URL: https://ranunculus-caterpillar-62hs.squarespace.com Hello, I am trying to add from grayscale to colour overlay on hover to the portfolio grid:simple.

When I added this code to Custom CSS nothing changed. This code works only for gallery section grid but not for Portfolio grid tiles.

6 answers to this question

Recommended Posts

  • 1
19 hours ago, Voila said:

Add to Design > Custom CSS

a.grid-item {
    filter: grayscale(1);
}
a.grid-item:hover {
    filter: grayscale(0);
}

 

Link to post
  • 0
1 hour ago, Voila said:

Site URL: https://ranunculus-caterpillar-62hs.squarespace.com

Hello,

I am trying to add from grayscale to colour overlay on hover to the portfolio grid:simple.

Add this in Design->Custom CSS
 

.gallery-grid--layout-grid .gallery-grid-item img {
  -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.5s;
}
.gallery-grid--layout-grid .gallery-grid-item:hover img {
  -webkit-filter: grayscale(0);
    filter: grayscale(0);
    filter: none;
}

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
21 minutes ago, bangank36 said:

Add this in Design->Custom CSS
 

.gallery-grid--layout-grid .gallery-grid-item img {
  -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.5s;
}
.gallery-grid--layout-grid .gallery-grid-item:hover img {
  -webkit-filter: grayscale(0);
    filter: grayscale(0);
    filter: none;
}

When I added this code to Custom CSS nothing changed. This code works only for gallery section grid but not for Portfolio grid tiles.

Link to post
  • 0
14 minutes ago, Voila said:

When I added this code to Custom CSS nothing changed. This code works only for gallery section grid but not for Portfolio grid tiles.

oh sorry I misread the question, could you enable your site password to check on yours?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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