The Preview / Inspiration

Hey guys, so Elegant Themes recently redesigned their website. I quite liked it.

One thing really caught my eye. This part:

It looks really nice, but the best part is when your mouse hovers over it.

That looks pretty good!

On mobile we get a 2 column layout.

So now I need to think about how to make it work. The thing is, it’s not just building it that’s the task here. That part’s easy. If it’s for a build that I’m doing myself, I don’t have to worry about making it easy to follow, or easy to edit. I can just build it any way I’m comfortable with. (In this case, I’d use ACF to add the extra images so it’ll show up in the archive. Note: Advanced level courses are coming soon. SCSS and ACF) Anyways, so sticking the best I can with Divi’s modules and build, here’s my way of recreating that cool layout with Divi.

Some points to remember

1. You will need three images on top of each other.
2. There’s a slight zoom when you hover.
3. It will be disabled on mobile (because.. hover doesn’t work on mobile)

Check out the preview

 

The video

 

The build

Let’s start with the whole row.

It’s the columns that will do the heavy lifting in this case, so go ahead and add three images modules per column.

The row and each column will have to take a custom class each.

Finally, add custom classes to each of the modules

And you’re ready to rock and roll!

The images I used are 500×800, just so I could get a card-like look to the layout.

 

The code

What’s a good layout without the CSS?

Copy paste this snippet:

.et_pb_row.ai-triple-overlap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap {
  position: relative;
  width: calc(25% - 20px);
  height: 220px;
  margin-right: 0;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image {
  overflow: hidden;
  width: 180px;
  max-width: 90%;
  height: 220px;
  border-radius: 6px;
  margin-bottom: 0;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image .et_pb_image_wrap > img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  height: 220px;
  width: 180px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-main {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  z-index: 4;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-right {
  position: absolute;
  right: 40%;
  bottom: 0;
  -webkit-transform: translate(50%, 0) scale(0.9);
          transform: translate(50%, 0) scale(0.9);
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media all and (max-width: 1024px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-right {
    display: none;
  }
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-left {
  position: absolute;
  left: 40%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0) scale(0.9);
          transform: translate(-50%, 0) scale(0.9);
  z-index: 2;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media all and (max-width: 1024px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-left {
    display: none;
  }
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-main {
  height: 250px;
  width: 150px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-main .et_pb_image_wrap > img {
  height: 250px;
  width: 150px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media all and (max-width: 1024px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-main {
    width: 180px;
    height: 220px;
  }
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-main .et_pb_image_wrap > img {
    height: 220px;
    width: 180px;
  }
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-right {
  -webkit-transform: rotate(5deg) translate(60%, -10%);
          transform: rotate(5deg) translate(60%, -10%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-left {
  -webkit-transform: rotate(-5deg) translate(-60%, -10%);
          transform: rotate(-5deg) translate(-60%, -10%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media all and (max-width: 768px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap {
    width: 45%;
  }
}
@media all and (max-width: 479px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap {
    width: 45% !important;
  }
}
@media all and (max-width: 768px) {
  .et_pb_row.ai-triple-overlap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .et_pb_row.ai-triple-overlap:after {
    display: none;
  }
}
@media all and (max-width: 479px) {
  .et_pb_row.ai-triple-overlap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

 
To add custom CSS, either..

  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)
 

The Download

The CSS and the json file.

 

And there you have it!

 
If you want to learn how to do this all yourself and/or solve your own problems easily

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 
If you want to learn how to make Divi awesomely responsive

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

update

ET has a post on this as well. You could check that out as well I guess. https://www.elegantthemes.com/blog/divi-resources/how-to-recreate-ets-layout-pack-previews-with-fan-out-hover-effects-in-divi

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

 

Card deck photo by Aditya Chinchure on Unsplash

The.. red/gray layered Photo by Lasse Møller on Unsplash

The paint? photo by Paweł Czerwiński on Unsplash

Fire photo by Arnau Soler on Unsplash

The yellow photo by okeykat on Unsplash

Ocean photo by Luis Vidal on Unsplash

Bokeh photo by Sharon McCutcheon on Unsplash