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

[JenaSunn]

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!

[UmairA]

Hey there @JenaSunn,

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

[ZestardTech]

Hello There,

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

[JenaSunn]

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

Appreciate your help, thanks!

[JenaSunn]

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

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

[JenaSunn]

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!

[ZestardTech]

Hello @JenaSunn
Not there opacity working is good!

[JenaSunn]

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

This image is straight from photoshop, that's why it's vivid/clear.

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]

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

.hero__overlay::before {
opacity: 0;
}

[JenaSunn]

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]

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.