Thumbnail B&W to Colour Rollover

Hey!

I'm using the OM template and trying to create a black and white to colour rollover on the work section of my site (https://www.sinomatic.co.uk/work) I've tried and can get the rollover to work, however it does the rollover effect on all the content within that page whereas I only want it to work on the thumbnails.

I would be super grateful for any help 😊

Thank you! 

Hi @carliemcgarity. Try inserting the following via Custom CSS:

.no-touch .collection-5d7a891600952e518d49e751 .project-image {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  &:hover, &:focus {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}

Let us know how it goes.

-Brandon

It works!! 😄😄

Thank you SOOO much, really appreciate your help! 

On 11/3/2019 at 10:40 AM, brandon said:

Hi Brandon and Carlie,

I am working with the Brine Template and would like to do the same thing - i want thumbnail rollover to transition from b&w to color on hover - I am a beginner with inserting code -- can you make a suggestion?

Thanks!
Liz

 

Hi @Benedetto. The example code is fairly generic. It's simply a matter of changing the selector (in this case ".collection-5d7a891600952e518d49e751 .project-image") to whatever applies to your use-case. One can use browser developer tools / web inspector to locate the collection ID or other selector information, make the adjustment, then add via Custom CSS.

As is often the case, if you need something more specific, it's best to include a link to the page in question, a description of what you want to achieve on the page. If that's the case, consider editing your message above to include that info (rather than posting a new message, which adds to the length of the thread here).

Hi there,

I am using Avenue template and want create black and white to colour rollover thumbnails on the 'Project' page (https://sapphire-wedge-gkn5.squarespace.com/config/design/template). I have looked at a few tutorials, and most mention 'Gallery Styles' for image grids under Site Styles. But this option does not appear in Avenue.

I would really appreciate some help.

Thank you 🙂

45 minutes ago, Jasm said:

Hi there,

I am using Avenue template and want create black and white to colour rollover thumbnails on the 'Project' page (https://sapphire-wedge-gkn5.squarespace.com/config/design/template). I have looked at a few tutorials, and most mention 'Gallery Styles' for image grids under Site Styles. But this option does not appear in Avenue.

I would really appreciate some help.

Thank you 🙂

Figured it out. All good. 🙂

On 11/3/2019 at 5:40 PM, brandon said:

Hi @carliemcgarity. Try inserting the following via Custom CSS:

.no-touch .collection-5d7a891600952e518d49e751 .project-image {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  &:hover, &:focus {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}

Let us know how it goes.

-Brandon

Hi Brandon, 

I'm trying to use this code for my WORK portfolio page, however when i add my collection id all of the 4 boxes change from black and white to colour together instead of separately.   I'm using the squarespace block identifier for google chrome but need to edit individual elements within the block.    

Do you know what i could try?

Best,
Monica

On 11/26/2020 at 10:41 PM, MDaley said:

Hi Brandon, 

I'm trying to use this code for my WORK portfolio page, however when i add my collection id all of the 4 boxes change from black and white to colour together instead of separately.   I'm using the squarespace block identifier for google chrome but need to edit individual elements within the block.    

Do you know what i could try?

 

Best,
Monica

Hi. Do you still need help on this?

I'm having the same problem as Brandon with all images turning to color on the rollover instead of them changing individually. 

25 minutes ago, Swebberdesign said:

I'm having the same problem as Brandon with all images turning to color on the rollover instead of them changing individually. 

what is your site url to help checking

https://papaya-lynx-72b7.squarespace.com/ It's not live yet though.

12 minutes ago, Swebberdesign said:

https://papaya-lynx-72b7.squarespace.com/ It's not live yet though.

you can set up a site wide password to share it temporary

Temp password is Working1234

1 hour ago, Swebberdesign said:

Temp password is Working1234

i saw them change color seperately, what wrong?

It's on the portfolio page

For users of Avenue and other 7.0 templates, I used this code to transition my index thumbnails from b/w to color and its very easy to invert that just flip the (0) and (1). You can also set the transition time, slower is better I think. I put this code in the index page header code injection. 

<style>
  a.project img {
    filter: grayscale(1);
}
a.project:hover img {
    filter: grayscale(0);
transition: 2.0s ease-in-out;
  }
 </style>

27 minutes ago, Swebberdesign said:

It's on the portfolio page

replace your current snippet with this, the one you use apply gray on the body instead the image

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

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

Remove this in custom css

That worked beautifully thank you!

Hi @bangank36

I'm finally back to trying to sort this out.  I have set up a temporary password for you help. 

https://fennel-bamboo-whpc.squarespace.com/config/

Sunshine01

The Portfolio page with the 4 iamges that link to each category change from greyscale to colour, however they have a white wash over them so the colour is not vibrant.  I think it's because I have a hover style set as well as some colour code.   But I can't figure out how to make it vibrant colour when hovered over instead.  

Can you please help? 

Thank you,
Monica

It may also be a background colour?  Or a shadow?  I'm not sure. 

On 4/12/2021 at 11:03 PM, MDaley said:

It may also be a background colour?  Or a shadow?  I'm not sure. 

Add to Design > Custom CSS

.portfolio-grid-basic .grid-item:hover .grid-image {
    opacity: 1 !important;
}

Could some help me as well? Trying to make this grid of portfolio images go from black and white to color or vice versa?

https://maracas-pineapple-48rb.squarespace.com/

7.1 Site. 

On 4/30/2021 at 1:11 AM, AngieRoxyE said:

Could some help me as well? Trying to make this grid of portfolio images go from black and white to color or vice versa?

 

 

https://maracas-pineapple-48rb.squarespace.com/

7.1 Site. 

It looks like you solved?

On 1/8/2021 at 2:37 AM, bangank36 said:

replace your current snippet with this, the one you use apply gray on the body instead the image

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

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

 

This worked really nicely for me but is there something I can add to this code so that the switch from b&w to colour isn't instantaneous? Would like it to transition a bit slower