The Grid Plugin - how to style the background picture of each Grid block

[philippevandenberghe]

Hello,

I need to darken the background image of a Grid block (The Grid Plugin). The Post Title being white is not clearly visible on images that contain bright areas.

My background images of the pages i show in my Grid are the featured images of each page.

I saw a CSS possibility namely filter: brightness(50%) which could be useful.
How do i apply this darkening on the background pictures of a Grid ?

[rad]

Hi Philippe,

Thanks for reaching out.

As stated here https://stackoverflow.com/questions/21363283/change-brightness-of-background-image, you shouldn’t apply that since not all browsers are capable of that. Instead, it has to be added as overlay.

Would you mind providing a sample URL that has this grid? I just like to see it’s completely possible and so I can check the proper selector.

Thanks!

[philippevandenberghe]

U can find the Grid on this page : scroll completely down under the “Liever iets anders” header.

https://www.cvo-crescendo.be/WPPhil/opleidingen/mode/patroontekenen/

These images in this Grid are the Featured images from those pages and we would like to display them a bit darker since the white characters upon the pictures are not so legible.

This site is password protected though ! Iwill send the password in a secure note to u !

[christian]

Hey Philippe,

Please add this code in the custom CSS tab of the grid.

.tg-item-inner .tg-item-media-holder .tg-item-overlay {
    opacity: 0.6;
    visibility: visible;
}

Hope that helps.

[philippevandenberghe]

Thank a lot, this works perfectly well !

[lely]

You’re welcome!

Cheers.