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

Thumbnail B&W to Colour Rollover

Question

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!ย 

Share this post


Link to post

4 answers to this 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)

Share this post


Link to post
  • 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

ย 

ย 

Share this post


Link to post
  • 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)

Share this post


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