You may have seen web pages where it seems that there is an image of an object that appears to overlap another item to create a nice 3d effect. In this article I will show you how to create an image overlap effect using a transparent image in WordPress. The page builder I am using in the article it called Elementor and is a plugin that is free to download.
End Result of Overlap Effect
As you can see from above the puppies appear to be climbing over the generic text section. I will show you how to create this effect step by step.
Find or Create your transparent image
The image below was created with a transparent background. Almost all image editing programs can create a transparent image. Notice that as the image is placed over various colors the image takes that color background.
For locations of royalty free images and other WordPress resources please see my article – Helpful WordPress Resources
Create or Edit a page where you would like the Overlap Effect to appear
I have an existing page that has a heading and a text section. I would like to have my puppies appear to climb over the text.
I need to insert the pic above in the text section. In Elementor page builder I can create a blank section above the text. I then drag an image block to the new section and choose the transparent picture I would like to use.
As you can see from above, I have the image inserted but it is too far from the text section. To fix this I need to adjust the margins of the images. To edit the image’s margins I need to select the image in the Elementor Page Builder and on the left hand side view the Advanced options.
Adjust the Image Margins
On the Advanced tab you will see a Margin section with 4 boxes to set. One for the Top, Left, Bottom and Right. By default when you change one number they all change together. We need to make sure they do not all change together for this effect to work. To make the number individually editable you need to click the small Link icon to the right of the boxes. This will unlink them all from saving the same value and allow you to enter a differenct number for each box.
To align the transparent image to the section below it we need to set a Negative Bottom Margin. In this example I set the margin to -85 on the bottom.
Setting a negative bottom margin will bring the image closer to and then overlap the item below it. Note that the puppies seem to no be behind the text section below. This is due to the Z Index of the items. The Z Index allows you be set with item is in front of the other. To fix the puppy image I now need to set the Z Index of the puppy to a number higher than the text section. As the default Z-Index is not set on the text section I can set the puppy Z-Index to anything above Zero. Setting it to 1 places the puppy image in front of the text section as seen below.
If you followed the steps above then you should end up with the correct overlap effect.
Check the Overlap Effect on the Mobile Version of your page
One of the reasons I prefer the Elementor Page Builder is the ability to adjust your pages for different sized screens. The settings we adjusted above will work nicely on a desktop screen but may need to be changed a bit for a mobile device.
In the bottom left of the Elementor page builder you can switch the display mode to Mobile to view your page as if it was on a mobile phone sized screen. Click on the small icon that looks like a computer monitor then choose the Mobile item.
After choose mobile your page builder screen will adjust to look like the below image.
I need to adjust the margin on this sized screen. As you can see from the above image the setting of -85 bottom margin is too much for this sized screen. Setting the bottom margin to -50 looks much better for this size screen.
This can also be changed for a Tablet sized screen by performing the above few steps but choosing the Tablet item instead of Mobile.
Please view some of my other WordPress Articles. If you have any feedback or other comments please leave a comment below.