Divi Tutorial – Image module hover effect

Mar 26, 2016

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.

Button Text

This is the CTA Title

This is the description field.

Button Text

This is the CTA Title

This is the description field.

Button Text
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 in any of the following ways:

Send a tip
$
AUD
GBP
EUR
Powered by Stripe
Hire me!
No matter how big or small your project is, I’d love to hear about it. I’ll do my best to help you and if I can’t I’ll try to point you in the right direction.

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

Pin It on Pinterest

Share This
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!