Jump to content

Thumbnail B&W to Colour Rollover

Recommended Posts

@Peter-Source

.no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
	transition: all 0.3s;
}

.no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item:hover img,.no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item:focus img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
	transition: all 0.3s;
}

 

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
48 minutes ago, tuanphan said:

@Peter-Source


.no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
	transition: all 0.3s;
}

.no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item:hover img,.no-touch #collection-5ff60835f2fc6a5e3d684edd .grid-item:focus img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
	transition: all 0.3s;
}

 

Perfect, thanks very much!

Link to comment
19 hours ago, AngieRoxyE said:

 

I just changed the opacity. Was looking for code to make the thumbnail alternate from a black and white image to full color. 

Add to Design > Custom CSS

a.grid-item img {
    filter: grayscale(1);
}
a.grid-item:hover img {
    filter: grayscale(0);
}
.portfolio-grid-basic .grid-item:hover .grid-image {
    opacity: 1;
}

 

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
  • 6 months later...

yes its www.coraldove.com/journal thank you!! 

 

This is the code I used: 

.no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.3s;
}

.no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item:hover img,.no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item:focus img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: all 0.3s;
}

 

It is doing something but not turing it greyscale

Edited by Caitlin000
Link to comment
53 minutes ago, Caitlin000 said:

yes its www.coraldove.com/journal thank you!! 

 

This is the code I used: 

.no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.3s;
}

.no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item:hover img,.no-touch #collection-5eeba9e7b86406138c6ccc45 .grid-item:focus img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: all 0.3s;
}

 

It is doing something but not turing it greyscale

You can try

.blog-basic-grid  .image-wrapper img {
  filter: grayscale(1);
  transition : filter 800ms linear;
}

.blog-basic-grid  .image-wrapper:hover img {
  filter: grayscale(0);
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...

Hi all! OK - I'm in the newest Squarespace version and trying to do what everyone else is... want my home page gallery to switch to color from b&w (over 1 second). Hoping this applies gloabally to the entire website. Oh - and any specific support around where to implement the CSS would be helpful. I'm just dumping it under "Design" and "Custom CSS." Perhaps I should do it elsewhere? None of the above code sections worked for me. 

https://colodesignstudio.squarespace.com/

password: belong

help would be wildly apprectiated!

Edited by whitneypeper
Link to comment
On 1/7/2023 at 3:30 AM, whitneypeper said:

Hi all! OK - I'm in the newest Squarespace version and trying to do what everyone else is... want my home page gallery to switch to color from b&w (over 1 second). Hoping this applies gloabally to the entire website. Oh - and any specific support around where to implement the CSS would be helpful. I'm just dumping it under "Design" and "Custom CSS." Perhaps I should do it elsewhere? None of the above code sections worked for me. 

https://colodesignstudio.squarespace.com/

password: belong

help would be wildly apprectiated!

I see you solved?

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
  • 2 months later...
On 3/23/2023 at 1:43 AM, rubyforelle said:

Hey there, I've had success doing this with regular image blocks, but can't figure out how to make it happen for this "people" section:

https://owl-springtail-bkyf.squarespace.com/landing-page

Help is appreciated!

I don't see People section on this page. Can you take a screenshot?

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

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.