I am redesigning an Elementor site in Gutenberg and am using cover blocks for page banner images. I want to replicate the overlay/gradient on the original site using a custom CSS class so I can use it on all pages. The problem I am having is targeting the cover block image with my CSS.
I copied the CSS from the original site using Chrome Inspect:
.cover-image {
background-color: transparent;
background-image: linear-gradient(0deg, #2d3d7b 76%, #b27f1d 100%);
opacity: 0.83;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
I added the custom CSS class to the cover block settings but the CSS is not affecting the image. I placed the CSS in my theme’s custom CSS.
My question is how should I target the cover block with my CSS?
Thank you.
The page I need help with: [log in to see the link]