Positioning two images on heading

I’m working on a portfolio site, and I have two main goals for finishing the
layout of the heading/hero section of the landing.

I want to put two images on the page overlapping other elements on the page. A slideshow that sits on top of the negative space left by the text, and another static image partially overlapping the slideshow.

Here’s a crude mockup of what I’m trying to do:

How do I do this?


Here is my site Read-Only: LINK

We’ll need your share link to give detailed info.

Short answer: relative and absolute positioning + changing z-index of elements to create the overlap.

I put the share link but it didn’t go for some reason?

https://preview.webflow.com/preview/site-032b5f?utm_medium=preview_link&utm_source=dashboard&utm_content=site-032b5f&preview=8473dcabd568ea71a1ab8c0c610605c4&workflow=preview

Started using grids since those can be made to overlap. Got something close to what I’m trying for.

But the grid is acting stupid and won’t even let me change it anymore. It’s locked itself into a 3x3 tiny area. Nothing changes it, and it’s almost impossible to even select the damn thing.

Share link: https://preview.webflow.com/preview/site-032b5f?utm_medium=preview_link&utm_source=designer&utm_content=site-032b5f&preview=8473dcabd568ea71a1ab8c0c610605c4&workflow=preview