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

JenaSunn
Excursionist
30 0 10

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
1055 96 214

Hey there @JenaSunn,

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

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
ShopHelp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
ZestardTech
Shopify Expert
3333 550 761

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
Excursionist
30 0 10

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

Appreciate your help, thanks!

JenaSunn
Excursionist
30 0 10

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

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

JenaSunn
Excursionist
30 0 10

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
3333 550 761

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
Excursionist
30 0 10

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
118 26 48

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

.hero__overlay::before {
opacity: 0;
}

JenaSunn
Excursionist
30 0 10

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
118 26 48

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.