How can I add a box behind text for better visibility?

[omascosmetics]

The text which is over my images in the slide show bar and collections sections of my website is extremely hard to read.

Is there a way to add a box behind the text to make it stand out like button on the image overlay,

Thanks in advance!!

[oscprofessional]

Hi omascosmetics,

Can you share the URL, So that i can resolve your issue.

[omascosmetics]

yes offcourse

https://omascosmetics.com/

i want the texts under the collection list to be in a box on the image like the one on the header.

thank you

[oscprofessional]

Hi,

Can you share the screenshot? exactly where you to modification.

[omascosmetics]

[oscprofessional · Accepted solution]

Hi,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.collection-grid-item__title.h3 {
    position: relative;
    top: 12px;
    background: #bdaa0a;
}

[omascosmetics]

Hi, I wanted the title to be in the middle of the image like the header

[omascosmetics]

[omascosmetics]

I wanted the title to be in the middle of the picture

[oscprofessional]

Hi,

Add this css at the place of previous css
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.collection-grid-item__title.h3 {
    opacity: 0.7;
    background: #baab48;
}

hope this will work for you if further any changes pls let me know. 

[omascosmetics]

Thank you! i think i prefer the previous one. thank you for all your help 😉

[oscprofessional]

@omascosmetics 

If the solution is helpful to you then give a like and accept it...