How can I make a semi-dark overlay on the image. Please help urgent.

Janamir
Excursionist
55 0 13

How can I make a semi-dark overlay on the image in Narrative Theme like image below? Please help urgent.

overlay.png

Store url:  https://polished-london.myshopify.com/

password: home

0 Likes
alexfc
Excursionist
15 4 2

Hi

As you can see in the attached screenshot, the div gf_hero-overlay has some inline styles.

alexfc_1-1620998903737.png

Remove them and instead use the following code

<div class="gf_hero-overlay" style="background: rgba(0,0,0,.2);"></div>

Or if you prefer not to inline the styles, remove them from the DIV tag and add this to the main CSS file:

.gf_hero-overlay {
  background: rgba(0, 0, 0, .2);
}


More info: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgba()

0 Likes
Pallavi
Shopify Expert
1653 244 286

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

#m-1617361831145>.module {
z-index: 9999999 !important;
}
#m-1617361831145>.gf_hero-overlay {
background-color: #a3a29cd1 !important;
opacity: 1 !important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes