How to Create an Image Overlap Section with Divi

by | Aug 22, 2017 | Divi Tutorial | 29 comments

Welcome to part 1 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.

This first tutorial walks you through “How to Create an Image Overlap with Divi.” This is based off the design of my homepage. I’ve found this layout to work very well for offering e-books, products and more but you can also use these methods to create an overlap of anything in Divi like images, blurbs, contact forms, etc. Along with the video tutorial, I’m also offering this as a FREE page layout! See below for download.

Here’s the CSS I used:


/*----------Sign Up Image Desktop View----------*/ 

.sign-up-image {
	margin-top: -75px;
	margin-bottom: -45px!important; }

@media only screen and (max-width: 1100px) {
	
.sign-up-image {
	margin-top: -45px; }
}


/*----------Sign Up Image Tablet View----------*/ 

@media only screen and (max-width: 980px) {
	
.sign-up-image {
    margin-top: -66px;
    margin-bottom: -18px!important;
    max-width: 355px; }
}


/*----------Sign Up Image Mobile View----------*/ 

@media only screen and (max-width: 479px) { 
	
.sign-up-image {
    max-width: 175px; }
}