Blog page featured image hover color

Support
#1

Hi there,

On the blog index page, the featured image is treated as a link to the blog post. This means that when a user hovers over the image, the entire image is covered by a bright blue color (my site-link color). This doesn’t look very good. Is there a way to make it so that the image is not covered by the link hover color?

Thank you very much,

  • Joshua
#2

Hi Joshua,

To remove the hover effect, you can add the code below in Theme Options > CSS

a.entry-thumb:hover:before {
    opacity: 0;
}

a.entry-thumb:hover img {
    opacity: 1;
}

Here are some related links for further reading:

Hope this helps.

#3

Hi @paul.r

Thank you for this. Thank you also for the links.

Unfortunately the code you gave did not remove the featured photo hover color on the page I’m trying to do it on. I am displaying the posts using the X Recent Posts element on this page.

P.S. the X recent Posts element is only visible on mobile.

#4

I should probably note that the code did work on the main blog index page. But I am specifically trying to do it with the X Recent Posts element. I apologize for not mentioning that initially.

-Joshua

#5

Hey Joshua,

Please try this:

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:before,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    display: none;
}

Hope this helps.

#6

Perfect @Jade! Thank you so much :slight_smile:

#7

You’re most welcome, Joshua.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.