Want to have an image with an overlay text

Community How-to
1

I am looking for a preset with an image plus text, where the text appears as an overlay in the image. The container should adjust to the size of the image, displaying the image fully. When I use a container with a background image, I can’t achieve this. Additionally, it should be responsive. I built a workaround by placing a text element under the image element and using transform to move it onto the image. However, this is not responsive and leaves a gap on the page where I placed the text element. I would appreciate any tips for solution or workarounds.

2

Hi!
I guess the simplest way is to add a pseudo element for the image using CSS.

  1. Add an image
  2. Add the class img-with-overlay to the added image
    image
    image726×1292 66.3 KB
  3. Add the necessary SCSS in the Code → CSS panel
.img-with-overlay{
    position: relative;
    flex-basis: auto !important;
    &::after{
        content: 'My Text';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff; //Text color
        font-size: 1.3em; //Optional txt. size
        background-color: rgba(0,0,0,0.3); //Optional bg. color
        
    }
}
  1. Tweak the SCSS to your needs

In the end you should have something like this

image
image3004×1208 303 KB

Hope this helps!

3 Likes
3

Thanks a lot. Works!