Create imagebox

Hi there,

if you add the text as the Caption of the image this should display on screen. We can then assist with some CSS to make it look like it does in the image. Let me know

Okay great, what css must I add?

And one more thing: where can I change the font style and size without affecting the caption of the pictures in my blog posts?

Try this:

figure.wp-block-image.caption-overlay {
    position: relative;
}

figure.wp-block-image.caption-overlay figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -100%, 0);
    font-size: 2em;
    font-weight: 700;
    color: #fff;
    font-family: 'Roboto Slab';
}

In the block editor, select the image block, in the Settings Tab > Advanced give the block a Additional CSS class of caption-overlay. Then this will only apply to that image.

Great, that worked! If I add more destinations, will the css automatically work or will I have to add more codes?
How can I change the font family to roboto slap?

I edited the code above, to include the font-family: 'Roboto Slab'; property, just amend the CSS to include that. That font will need to be one of those you have selected in your customizer.

No more code. Just create a new image block like the above and give it the same Additional CSS class. Or just duplicate the block and change the image, caption, link etc.

this one works:
figure.wp-block-image {
position: relative;
}

figure.wp-block-image figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -100%, 0);
font-size: 2em;
font-weight: 700;
color: #fff;
font-family: 'Roboto Slab';
}

but then its in my blog images as well. if I add caption-overlay, nothing happens

Ah now I got it. Forgot the additional css class.
Thank you very much! :)

Glad to be of help