How to Overlay Text on Multicolumn Image

[Danceddiction]

I'm trying to put a text overlay on multicolumn images in Dawn theme. Currently the website looks like this:

But I would like to add the header and the paragraph over the center of the images like below: 

I've tried following along with some other messages on here but none of them worked. Please let me know how I can accomplish this! 

Thanks, 

[5079diane]

I would upload my images into Canva. CREATE A NEW DESIGN in Canva using 1000 px x 1000 px design size.  Put your pic on a design page and size it to fit. Then add your TEXT on as an overlay over pic, adjusting the size and spacing to place it where you want it on your pic. Then SHARE each design page, saving it as a transparent download. Then upload them/drag them into your Column as you create it. Get my drift? Hope this helps.

[Danceddiction]

This is my backup option. I've done this before, but I don't think this is the preferred way to do it. Thanks for the reminder of this!

[Sangeetanahar]

hello @Danceddiction 

an you please share your Website URL
thanks

[Sangeetanahar]

hello @Danceddiction 

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->section-multicolumn.css...> add the code end of the file

@media screen and (min-width: 767px) {
.multicolumn-card__info {
    position: absolute;
    bottom: 20%;
    text-align: center;
  color:white !important;
}
.multicolumn-card__info h3 {
    color: white !important;
    font-size: 25px;
    font-weight: bold;
}
  .multicolumn-card__info p {
    font-size: 16px;
    text-align: center;
    font-weight: 600;
}
  .multicolumn-card__image-wrapper img {
    position: relative;
}
}

If this was helpful, hit the like button and accept the solution.
Thanks

[Danceddiction]

This is really good. Very close to what I need but with the exception of a few things: 

1. I want this to only apply to certain multi-column sections. I have another multi-column section I don't want this to happen to and want it to be standard. 

2. The text isn't completely centered nor does it wrap. In order to go to the next line in the paragraph setting I have to press enter where I want to go to the next line: 

[Made4uo-Ribe]

Hi @Danceddiction 

Would you mind sharing your store URL? Thanks!

[Danceddiction]

URL is here: https://danceddiction.com/?_ab=0&_fd=0&_sc=1
Password is: testword. 

Thanks for taking a look at this. 

[Made4uo-Ribe · Accepted solution]

Thanks for the info, check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.section-template--18442698490111__multicolumn_YFTjji-padding .content-container:after {
    z-index: auto; 
}

.section-template--18442698490111__multicolumn_YFTjji-padding .multicolumn-card__info {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%); 
    text-align: center;
    color: white;
    width: 100%;
}

#shopify-section-template--18442698490111__multicolumn_YFTjji h3 {
    font-family: "Bungee", sans-serif;
    color: white;
    line-height: 1; 
    font-size: 30px;
    text-shadow: 2px 2px #000000;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe]

Welcome! Would you mind hitting 'like' as well? Thanks!