making project thumbnails always B/w and colour only on mouse hover

[aras.acarg]

Hi!

I know Lay offers a possibility of making a project thumbnail B/W on mouse hover.
However I would like to have the opposite happening:
thumbnails are b/w and become colour on hover.

Is this something I have to do with CCS or is there another way that I'm not seeing?

Thank you:)
Sara

[samfrancis]

Yeah that’s doable with CSS, Lay doesn’t have a built-in toggle for “reverse hover” like that.

You basically just set the thumbnail to grayscale by default, then remove it on hover. Something like:

.project-thumbnail img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.project-thumbnail img:hover {
  filter: grayscale(0%);
}

You might need to adjust the class name depending on how your thumbnails are structured, but that’s the general idea.

Clean effect btw, looks really nice when done right 👍

[arminunruh]

amazing thanks a lot for the help samfrancis! <3