Grid row image backgrand ovarlay

Hey creativeopole,
Thanks for the link, it looks like your cell “OFERTA” already has a background color and opacity, what are you having trouble with?

#top .cs-flex-bg #cs-bg-oferta {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5)!important;
}

Best regards,
Mike

Hi,
Thanks for the image, I see it is important for the text to be on top of the overlay, is there any on-hover action?
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.page-id-3906 .flex_cell .overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  position: absolute;
  z-index: 0;
}
#top.page-id-3906 .flex_cell .flex_cell_inner {
	z-index: 10;
    position: relative;
}
#top.page-id-3906 .flex_cell.avia-link-column.avia-link-column-hover {
    opacity: 1;
}
#top.page-id-3906 .flex_cell.avia-link-column.avia-link-column-hover:hover {
    opacity: 1 !important; 
}

Then add this code to the end of your functions.php file in Appearance > Editor:

function custom_overlay_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
$('#top.page-id-3906 .flex_cell').prepend('<div class="overlay"></div>');
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_overlay_script');

After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hi,

Looks like you’ve managed to add the overlay using the following css code.

#top #cs-flex-cell-2 .flex_cell::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
}

It also changes to red oh hover. Do you require more help with it?

Best regards,
Ismael