Greyscale images, colour when hover

  • Resolved theidowich

    (@theidowich)


    10 years, 6 months ago

    Hi!

    I like the Tracks-theme, but I would really like to make it thus that all the pictures on my page was in greyscale or black/white, but when the mouse hovers over them they appear with colour.

    Hope someone can help me. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    10 years, 6 months ago

    Thanks for choosing Tracks!

    This can be done with some CSS. The one caveat is that it may not work across all browsers at this time.

    That said, here is the CSS you can use:

    .featured-image {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.featured-image:hover {
-webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: grayscale(0);
  filter: none; /* IE 6-9 */
}

    Copy & paste the code above into the “Custom CSS” section in the Customizer (Appearance > Customize), and it should take affect right away.

    Thread Starter theidowich

    (@theidowich)

    10 years, 6 months ago

    It’s working! at least in Chrome and firefox, but (of course) not in IE
    But thank you very much!

    Theme Author Ben Sibley

    (@bensibley)

    10 years, 6 months ago

    lol of course right?

    No problem 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Greyscale images, colour when hover’ is closed to new replies.