Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 23, 2025 at 2:21 pm #1488447
    Munford

    HI
    I am using this code to make my images go from grayscale to color on hover. 

    /*image hover grayscale to color*/
div.avia-image-container div a img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

div.avia-image-container:hover div a img {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

    I am also using a blog post element and I’d like those images to also be in grayscale and turn to color on hover on the image link.
    Can you help me with that?

    I’d also like the title text on those posts to be black and the hover to be white.

    Thanks
    Nancy

    • This topic was modified 5 days, 10 hours ago by Munford.
    August 23, 2025 at 8:51 pm #1488455
    Mike

    Hey Munford,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .slide-entry a.slide-image img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

.slide-entry a.slide-image:hover img {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

#top .slide-entry .slide-content h3 a {
	color: #000;
}
#top .slide-entry .slide-content h3:hover a {
	color: #fff !important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 27, 2025 at 10:19 pm #1488634
    Munford
    This reply has been marked as private.
    August 28, 2025 at 8:42 am #1488649
    Ismael

    Hi,

    Great! Glad to know the modification is working. Let us know if you have more questions. Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘blog post image hover’ is closed to new replies.