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:

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.

[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;
}
[/css]

That’s it! I’d love to hear about any successes or failures you have with this. Email me at hello@yatesdesign.com.au.