Post title and excerpt overlay

Hi Gerrit,

This will require some custom CSS.

Before adding the custom CSS, you need to create:

1. A container block with its background image set to the featured image.
2. Add another container block inside it, set the background color and add the content you want to the child container.

Once that's done, we can have another look and write the custom CSS for you.

Let me know :)

Ok thank you, I have done so. What css code do I need to use?

Hi Gerrit,

Can you also share the link to the specific page where you've created this structure? If it's still in your local testing site, can you create a static page we can view and paste the structure there? We'll provide the CSS after we see it live.

Here is link to the page, it is now live: https://lovstaddesign.no

Try adding this CSS:

.gb-container.gb-container-8407c2fd {
    opacity: 0;
    transition:all 0.3s ease;
    flex: 1;
}

.gb-container.gb-container-50b02063:hover .gb-container.gb-container-8407c2fd {
    opacity:1;
}

.gb-container.gb-container-50b02063 > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

The CSS is using the GB block's unique ID, if the blocks are removed and re-added, the ID will change, the CSS will not work anymore.

So I would recommend adding CSS class to the parent container which has the background image, eg. bg-img-container, to replace the gb-container-50b02063 in my code.

And add another CSS class to the child container which has the content and background color, eg. content-container to replace the gb-container-8407c2fd in my code.

https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Thank you, that worked perfect.

No Problem, glad to help :)