Divi Tutorial – Image module hover effect

Mar 26, 2016

Update!

I’ve posted an updated version of this tutorial with an easy to download layout file and a few extra options.

3.0.49 Update

Divi’s 3.0.49 update seems to have broken this effect. To fix it add this code to your CSS:

.border-hover .et_pb_promo_description { position: static !important; }

I’ll be adding an updating version of this tutorial with downloadable layout files within the the next week but this should do in the meantime.

Codrops is an excellent site full of “Useful resources and inspiration for creative minds.” I adapted one of their “Ideas for Subtle Hover Effects” for a site I’m working on and thought I’d share the results here.

This effect uses the Divi Image & Call to Action modules. We use the image as the background, the CTA module’s title and description fields as the text and the CTA module’s button as the link.

Here’s a look at what the finished product looks like:

This is the CTA Title

This is the description field.

This is the CTA Title

This is the description field.

This is the CTA Title

This is the description field.

If you’d prefer to skip the tutorial, you can download the layout and CSS in one handy little zip file. You can add the CSS code to your CSS file of choice or add it to Divi’s Custom CSS section (which can be found in Divi Theme Options > General tab > Custom CSS). To import the layout file follow this post on the Elegant Theme website.

To start, add a row with 2, 3 or 4 columns & then use these settings:

  • Enable “Make This Row Fullwidth:”
  • Enable “Use Custom Gutter Width:” & set it to “1”
  • Set “Custom Padding” to 0
  • Enable “Keep Custom Padding on Mobile:”
  • In the Custom CSS tab, set the CSS Class to “border-hover”

In each column add an Image Module & a Call to Action module. In the Image Module add an image (I’m using images from unsplash.com) set “Remove Space Below The Image:” to “Yes” & in the “Advanced Settings” set “Force Fullwidth:” to “Yes” & “Always Center Image On Mobile:” to “Yes.”

In the Call to Action Module add a title, link, button text (this will be hidden but needs to be added) & description. Set “Use Background Color” to “No.”

Once you’ve got all that set up, you can add this code to your CSS file of choice or add it to Divi’s Custom CSS section (which can be found in Divi Theme Options > General tab > Custom CSS.

.border-hover .et_pb_column {
 overflow: hidden;
 position: relative;
}

.border-hover .et_pb_column img {
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}

.border-hover .et_pb_column:hover img {
 transform: scale(1.1);
}

.border-hover .et_pb_column:hover .et_pb_image:after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.4);
 content: '';
}

.border-hover .et_pb_column .et_pb_promo_description:before {
 top: 50px;
 right: 30px;
 bottom: 50px;
 left: 30px;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 -webkit-transform: scale(0,1);
 transform: scale(0,1);
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
 position: absolute;
 content: '';
 opacity: 0;
 -webkit-transition: opacity 0.35s,
 -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

.border-hover .et_pb_column .et_pb_promo_description:after {
 top: 30px;
 right: 50px;
 bottom: 30px;
 left: 50px;
 border-right: 1px solid #fff;
 border-left: 1px solid #fff;
 -webkit-transform: scale(1,0);
 transform: scale(1,0);
 -webkit-transform-origin: 100% 0;
 transform-origin: 100% 0;
 position: absolute;
 content: '';
 opacity: 0;
 -webkit-transition: opacity 0.35s,
 -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

.border-hover .et_pb_column:hover .et_pb_promo_description:before, .border-hover .et_pb_column:hover .et_pb_promo_description:after {
 -webkit-transition-delay: 0.15s;
 transition-delay: 0.15s;
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
}

.border-hover .et_pb_column .et_pb_promo_description h2 {
 opacity: 0;
 color: #fff;
 position: absolute;
 top: 37%;
 width: 100%;
 text-align: center;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 margin: 0;
 padding: 0;
}

.border-hover .et_pb_column .et_pb_promo_description p {
 opacity: 0;
 color: #fff;
 position: absolute;
 top: 42%;
 width: 100%;
 text-align: center;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}

.border-hover .et_pb_column:hover .et_pb_promo_description h2 {
 opacity: 1;
 position: absolute;
 top: 40%;
 width: 100%;
 text-align: center;
 color: #fff;
}

.border-hover .et_pb_column:hover .et_pb_promo_description p {
 opacity: 1;
 position: absolute;
 top: 50%;
 width: 100%;
 text-align: center;
 color: #fff;
}

.border-hover .et_pb_promo {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.border-hover .et_pb_promo_button {
 opacity: 0;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.border-hover .et_pb_promo_description {
 position: static !important;
}
That’s it! I’d love to hear about any successes or failures you have with this. Email me at hello@yatesdesign.com.au.

Thanks for reading!

If you found this post helpful you can show your appreciation by leaving a review on the Yates Design Facebook page:

If you need help...

I am available for hire! No matter how big or small your project is, I’d love to hear about it. All quotes are obligation free.

Drop me an email at hello@yatesdesign.com.au to discuss.

Ready to launch a new project? Let's work together 

Like this post? Subscribe!

Like this post? Subscribe!

Sign up to the Yates Design newsletter & receive news, tips & tricks about how to improve the online presence of your business.

You have Successfully Subscribed!

Pin It on Pinterest

Share This