How to Overlap Images in Elementor (Custom CSS Included)

How do you handle the constraints of containers? In this tutorial, you’ll learn how to overlap images in Elementor – right out of its container. I’ve included some CSS to get you started.

There are numerous aesthetic reasons to want an image to expand past its container in overlap with the parallel section. Here’s how to overlap images in Elementor.

Create Overlapping Images in Elementor: 4 Steps

Step 1: Create or Select Your Section

Inside your page, you’ll want to create a section to customize. Then create a two-column container.

Step 2: Add Content

In my demo, I added a couple of simple text paragraphs (Text Editor) on the right.

But don’t add an image, yet.

Step 3: Upload Your Image

This step is different than how you would expect.

Rather than upload the image to the page directly, you’ll upload it into Media Library.

In the WordPress dashboard, go to Media > Upload New Media File. Once uploaded, copy the File URL, as indicated in the screenshot below.

You’ll need this URL for the next step.

Step 4: Add CSS

Now it’s time to add the custom CSS.

1. Right-click on the left column and then select Edit Container.
2. Next, in the Elementor menu, go to Advanced > Custom CSS.
3. Copy and paste the CSS code below.
4. Be sure to insert your image URL in place of the bolded URL from my demo site.

The width and height percentages will need to be fine-tuned according to your specific page specs and design requirements.

selector:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 250%;
    height: 100%;
    background: url(http://elementor.gudpixel.com/wp-content/uploads/sites/2/2023/12/20090104margarita_0616.jpg) no-repeat;
    background-size: contain;
}

Here’s how the code renders on an Elementor page. Hopefully, your image looks similar. As you will see, some text customizations will be required for readability.

More Elementor Customizations: How to Add Custom Hover Effects

Your turn

How did it go for you? If you used a variation of the code, I would love to see it. Please share below so other readers can benefit from what worked for you.