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

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 101 225

Hey there @JenaSunn,

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

JenaSunn
Explorer
47 0 11

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

Appreciate your help, thanks!

ZestardTech
Shopify Expert
5624 1024 1352

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 @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
5624 1024 1352

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
148 27 72

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
148 27 72

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