FROM CACHE - en_header

remove image opacity on "image text overlay" in debut theme and move text to the left/right

JenaSunn
Explorer
47 0 11

Hi, can anybody guide me on how to remove image opacity on "image text overlay" in debut theme and how to move the text either to left or right? Would really appreciate anyone's help. Thanks in advance!

 

 

 

 

Replies 10 (10)
UmairA
Shopify Partner
1106 100 221

Hey there @JenaSunn,

Are you able to provide your store URL so I can provide the solution here?

Hire me for: Shopify Development | Conversion Rate Optimization | Custom Coding
umairabbascs@gmail.com || WhatsApp || LinkedIn
Want to 2X your store's sales with a highly converting design & stunning user experience? Contact me for FREE consultation and store audit!
ZestardTech
Shopify Expert
3681 610 853

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

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
JenaSunn
Explorer
47 0 11

Hi @UmairA, thanks for quick reply, it's: https://finamari.com/ 

Appreciate your help, thanks!

JenaSunn
Explorer
47 0 11

Hi @ZestardTech,  it's: https://finamari.com/ 

Appreciate it if you could help me solve this, thanks so much!

JenaSunn
Explorer
47 0 11

Hi @ZestardTech, it's: https://finamari.com/ 

I hope you could help me already on how I can remove the opacity on "image text overlay" so I can have a vivid image like this photo below.  Thanks so much!hot-wild-hero-img2.png

ZestardTech
Shopify Expert
3681 610 853

Hello @JenaSunn
Not there opacity working is good!

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
JenaSunn
Explorer
47 0 11

Hi @ZestardTech, I'm sorry I didn't understand your reply.

This image is straight from photoshop, that's why it's vivid/clear.hot-wild-hero-img2.png

 

image overlay_actual.png

And this is from my website using the "image text overlay" mode with opacity that I can't remove, I hope you will notice the difference.

 

 

 

 

Wish you could help, please. Thanks.

 

Alan15
Shopify Partner
126 27 53

Maybe adding this css to the end of your theme.css file in the assets folder:

.hero__overlay::before {
opacity: 0;
}

Need more help? Contact me here
JenaSunn
Explorer
47 0 11

Hi @Alan15,  it worked! Just another problem though, the text is white and now it's unreadable, could you please help me on how I can change it to black or another color?  Thanks so much.

Alan15
Shopify Partner
126 27 53

Hi @JenaSunn 

If you want the text in black, you can add these lines below the last code:

.hero .mega-title, .hero .mega-subtitle p{
color: black;
}

If you want to add a background behind the text, to make it stand out more, you could add a background color with an opacity ( here it's white with an opacity of 0.25 😞

.hero .mega-title, .hero .mega-subtitle p{
color: black;
background: rgba(255, 255, 255, 0.25);
}

That should work hopefully, play around with the colors and opacity until it suits.

Need more help? Contact me here