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

Thumbnail B&W to Colour Rollover


carliemcgarity

Question

Recommended Posts

  • 0

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
  • 0
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
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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 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 lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
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
  • 0
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 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 lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
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
  • 0
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 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 lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
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
  • 0

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
  • 0
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 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 lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
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
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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