Overlay on all banner zones code
Add to CSS:
//add overlay to all banner images begin
//first make banners clear and shrink height
.banner-zone:before {
opacity: 0;
}
//then add overlay
.banner-zone {
position: relative; /* Ensure the banner is positioned to allow absolute positioning of the overlay */
z-index: 0; /* Ensure the banner is below the overlay */
height: 250px !important; //make banner zone thinner
}
.banner-zone:after {
content: "";
background-image: url('HUBSPOT IMAGE URL HERE');
background-size: cover; /* Adjust as needed */
background-position: center; /* Adjust as needed */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.8; /* Adjust opacity for transparency */
pointer-events: none; /* Ensures the overlay does not interfere with clicks */
z-index: 2; /* Ensure the overlay appears above the banner */
}
//end of banner overlay