Jump to content

Thumbnail B&W to Colour Rollover

Recommended Posts

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

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
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

 

 

Link to comment

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

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 6 months later...
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. 🙂

Link to comment
  • 5 months later...
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

Link to comment
  • 2 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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

Greeting, it's 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
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

Greeting, it's 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
1 hour ago, Swebberdesign said:

Temp password is Working1234

i saw them change color seperately, what wrong?

image.thumb.png.b5aef37737fa0c50a4e896ecc6fcca42.png

Greeting, it's 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment

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>

 

Edited by derricksrandomviews
Link to comment
27 minutes ago, Swebberdesign said:

It's on the portfolio page

image.thumb.png.76d197acce8732335be163266493cb08.png

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

image.png.491567fa425b6c33236f714dab05ec83.png

Greeting, it's 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
  • 3 months later...

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

Screenshot 2021-04-12 at 17.58.45.png

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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?

image.thumb.png.6e85af5204ff5d58f9756f228f1aebd3.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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

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.