Add a box behind text on featured collections on Sahara theme

[Sharon-W]

Hi

I find the font does not stand out enough on my featured collections images. 

I am looking to add a almost transparent semi see through (or something that matches the colour) box behind the text on my featured collections to make the wording stand out more.

I am using Sahara theme. 

Can anyone assist please?

[namphan]

Hi @Sharon-W,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.media.media--overlay.card-collection__media:after {
    content: '';
    background: #0000003b;
}

[namphan]

Hi @Sharon-W,

Have you tried my tutorial? Is it what you want 😊

[Sharon-W]

Thank you, can you provide an example of what this will look like? and also, do I have to manually go in and apply it or should it apply automatically?

[Ahmed2]

can you give me images that explain what you want to do because your problem is not clear enough for me

[Sharon-W]

[Ahmed2]

You can make the text in box over the image, i will give you an example, because it is never stand out on the image and you will harms the customer experience and this will effects your store salles and Customer Retention to your store 

 

 

[Sharon-W]

Hi

Thank you. Please see attached image, where the writing is on the
collections, i would like a transparent banner put behind it to make the
text stand out a bit more

[namphan]

Hi @Sharon-W,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.media.media--overlay.card-collection__media:after {
    content: '';
    background: #0000003b;
}

[Ahmed2]

I seen it you can make the font bigger and bolder and change the color to something like white like this image 

 

[Sharon-W]

Thank you, this is not what I am looking for. I am looking to place a more definitive banner over the text to highlight the text. But thank you

[Ahmed2]

So that i can understand what you are looking for send me an example 

[namphan]

Hi @Sharon-W,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.card-collection__title {
    position: relative;
}
.card-collection__title:after {
    content: '';
    background: #0000003b;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

You can change the background as you like, it will display like this: