How to change blog entry hover color

We would like to change the color of the hover on the blog entries to white instead of black. I can’t find it in the CSS how to change this, can you please help?

Hi There @darwinstudios

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and adjust the value between 0 to 1 according to your requirement.

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

Hope that helps.

I see that adjusts the opacity, but can you change the overlay color?

Hi There,

To make the hover color white please add this CSS.

a.entry-thumb {
background: #fff !important;
}

Hope this helps!

Thanks

Thank you!

You are most welcome. :slight_smile:

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Thank you, I am familiar with CSS, I just couldn’t find the right selector :grinning:

Glad we were able to help :slight_smile:

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