Featured image hover icon

Support
#1

Hello-

If you go to this page: https://devv.rayrolando.com/category/video-teachings-and-qa/
And hover over the featured image I changed the hover image icon and background color using CSS (pasted below).

Recent theme upgrades have interfered with a lot of my CSS and I can’t get this hover image the right size. How can I make this image smaller. It used to look like this:

image005
image005842×528 134 KB

/FEATURED IMAGE CURRENT CSS/

.entry-thumb {
background-color: rgba(10, 114, 186, 0.5);
}

.entry-thumb img {
display: block;
overflow: hidden;
width: 325px;
height: 275px;
object-fit: cover;
}

.has-post-thumbnail .entry-featured {
border: none;
box-shadow: none;
}

.single-post .x-main .entry-featured {
display: none;
}

a.entry-thumb:hover img{
content: url(https://rayrolando.com/wp-content/uploads/2020/06/hover-emblem.png);
}

#2

Hey @KimAnn,

Thanks for writinga very detailed post information. You are using this one:

a.entry-thumb:hover img {
    content: url(https://rayrolando.com/wp-content/uploads/2020/06/hover-emblem.png);
}

This is incorrect because you cannot control the image size. Please check this article instead:

Be advised that custom CSS coding is beyond the scope of our support. The above is just an example code on how you may achieve what you have in mind. You can check out our ONE service for a detailed and tailored solution.

Best Regards.

#3

thank you that did it

#4

One more issue- I followed stackoverflow and it works for desktop. But it is not responsive. Can you please advise?

#5

Hey @KimAnn,

Providing custom code is outside the scope of our theme support but I also advise that you remove that hover effects on mobile because there’s no hover effect on mobile.

You can hide the hover effects on mobile by creating a media query condition, here are some guides:


Hope that helps and thank you for understanding.

#6

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