Best way to overlap featured image with header element block

Hi there,

as you're using a dynamic Block element, the simplest method would be to include the featured image in the Block Element.

1. Add another Container Block below your title post meta container.
2. Add the GP Dynamic Image Block and select Featured Image, inside the new container.
3. Limit the inner width of the container to match your post content.
4. Use negative Top Margins on the new container to pull the image over the container above.
5. On the existing cotnainer Block you need too add sufficient bottom padding fro the overlapping block.

Hi David,

Yes I tried this. I found that I couldn’t get the image to act in the same way with responsive.

I’ll attempt it again to see if I can achieve what I’m looking for

Give it another shot - and then let us see the responsive issues if you get stuck :)

Hi David,

I've done the steps you outlined. I've given the top margin -150px and it looks like it works great in desktop, tablet and mobile. However there are a few things I cant figure out how to do.

I'd like to get rounded corners like the standard featured images do

The spacing at the sides in mobile need to be fixed to be like the standard featured images. Currently the new featured dynamic image fits to the edges without any spacing

Thanks for your help once again

Hi there,

Let's tweak the settings a bit.

On the container's setting, you can set the border radius to 8px.

Then you add this CSS:

.overflow-hidden {
overflow: hidden;
}

You then add overflow-hidden to the class selector.

This is for the border-radius to take effect.

As for the spacing on mobile:

Go to the Mobile tab of the container and set a margin of 30px for both left and right. :D

Thanks for this. The border radius doesn’t seem to work on desktop

Thanks for this. The border radius doesn’t seem to work on desktop

Make sure you've applied the border-radius on the desktop tab instead of only on the mobile tab. :D

yes I have applied the border-radius to the container desktop

Ah I see the issue here.

The overflow is not affecting the contents of the container block because the image is small.

In that case, let's just apply the border property directly to the image inside it.

Here's what you can do.

You can remove the overflow-hidden CSS and the class you've added. You can remove the border radius on the container block as well.

You then add this CSS:

.border-radius{
border-radius: 8px;
}

And then go to the image block and add border-radius to the Additional Class(es) field. :D

Thank you but this doesn't work

I've doe what you said up to the point of adding the "border-radius" in the Additional Class field. This is because I am using a "Dynamic Image" as suggested by David at the start. This is to pull in the featured image.

The "Dynamic Image" block doesn't have a Additional Class field

Please advise

Ah, in that case let's just use that img's selector. :D

Try this CSS:

img.dynamic-featured-image.wp-post-image {
    border-radius: 8px;
}

Expected result from CSS - https://share.getcloudapp.com/kpuDjZQ4

perfect thank you. It worked

Wow, seems like it was simple in the end. Thank you for your patience and help

I should've spotted the dynamic images earlier. That's my bad.

Glad to be of any help. No problem. :D