Docs

[drfretboard]

Good morning!

I’ve been trying to modify the color of the overlay on the featured image of the masonry blog representation (generic/for all posts), but no success.

What’s the code I should be using?
Note: because of previous ‘discomfort’, I do not modify CSS in the Customizer, but in the style.css of the child-theme.

[drfretboard]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > CSS in the Customizer.

.entry-thumb {
    background-color:Red;
}

Change red with the color that you like.

Thanks

[drfretboard]

Thanks, somehow that seems to work now.

Could you tell me how to set the opacity of the overlay upon hovering without affecting the actual image beneath it?

[Christian]

Please add the code below in your CSS

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

You can set it from 0 to 1. 1 will show the image without overlay.

Thanks.

[drfretboard]

Thanks again.
That’s really close to what I’m looking for, however, the icon image becomes opaque aswell, which is not what is required. Overlay yes, icon no…
Also, and strangely to me, the icon does not have opacity beyond the rectangle of the image…

[Nabeel A]

Hi again,

Please add the following code as well in your Customizer:

.entry-thumb:before {
    z-index: 999 !important;
}

Let us know how this goes!

[Author]

Posts