Feature Image Colour on Hover

  • Resolved JoeMD

    (@joemd)


    7 months, 1 week ago

    Hello folks,

    I’d like to have a greyscale theme for my website so I’d like for featured images in my main page’s post list to appear b/w, and then show in colour when hovered over. Conversely, just appearing in colour on the post page would be fine, too.

    I’ve had a bit of a Google, but all I can really find is how to increase the brightness of on an image on hover. If anyone could point me in the right direction to find info on how to do the above it would be most appreciated.

    Cheers

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • !Benni

    (@benniledl)

    7 months, 1 week ago

    Hi!

    This can be done using this css:

    .wp-post-image {
  filter: grayscale(1);
  transition: filter 0.5s ease; /* Adjust the duration as needed */
}

.wp-post-image:hover {
  filter: grayscale(0);
  transition: filter 0.5s ease; /* Adjust the duration as needed */

}

    If you donÄT want the slowly appearing color then just delete the lines with “transition: filter…..”

    Thread Starter JoeMD

    (@joemd)

    7 months, 1 week ago

    Excuse my ignorance, but where would I put this code? I tried adding it to the post list block and the featured image itself but neither worked.

    • This reply was modified 7 months, 1 week ago by JoeMD.
    • This reply was modified 7 months, 1 week ago by JoeMD.
    !Benni

    (@benniledl)

    7 months, 1 week ago

    Hi, this explains it: https://www.hostinger.com/tutorials/wordpress-custom-css#Simple_Custom_CSS

    Thread Starter JoeMD

    (@joemd)

    7 months, 1 week ago

    Absolutely brilliant. Thanks so much!

    • This reply was modified 7 months, 1 week ago by JoeMD.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Feature Image Colour on Hover’ is closed to new replies.