Follow us

Four More Linkable Image Hover Effects | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

Recipe #11 is by popular demand and something I really enjoyed creating. Four more linkable image hover effects!

Last time I showed you how to use the CSS attr() Function to display our content, this time I am going to use the ‘figure’ and ‘figcaption’ elements to achieve similar results. There is always more than one way to skin a cat ;).

Hover over the image below or click here to see the live demo of all four effects and download the json file (you need Divi 2.7 for this as it uses the new portability functionality).

PUG PUPPIES

hover5

Pug Puppies

View The Gallery

So let’s get cooking!

Ingredients

 

The Divi Theme or Divi Builder Plugin from Elegant Themes
A suitable image (any size will do but mine are 480 x 320px)

 

Cooking time

 

This should take you around 10 minutes max.

 

Preparation

 

The first thing we need to do is create our module. In this tutorial I will show you how to achieve the first effect (slide down) but the process is the same for all of them.

Create a new section with one column and add a text module.

Four more linkaable image hover effects for Divi tutorial

As we are just using one column, we are going to open up the advanced design settings tab and set the max width to the width of the images we are using, so mine is 480px but you use whatever image size you choose. This will just stop the titles from overhanging the image if the image width is less than the width of the module. If you are using more than one column then you may not need to set the max width but do check on larger screen sizes and use it if you need to.

Four more linkable image hover effects for Divi tutorial

 

Method

 

Next, open up your text module, scroll down to the content area and paste in the following, then save and exit:

You will need to add your title, image url, hover title, link url and link text depending on what you want to show.

<div class="ds-hover5-wrapper"><div class="ds-hover5">
<h2>TITLE HERE</h2>
<p> </p>
<figure class="ds-hover5"><img src="IMAGE URL HERE"><br><figcaption>
<p>HOVER TITLE HERE</p>
<p><a href="LINK URL HERE">LINK TEXT HERE</a></p>
</figcaption>
</figure>
</div>
</div>

 Here is the code for each effect

Slide Down HTML
<div class="ds-hover5-wrapper"><div class="ds-hover5">
<h2>TITLE HERE</h2>
<p> </p>
<figure class="ds-hover5"><img src="IMAGE URL HERE"><br><figcaption>
<p>HOVER TITLE HERE</p>
<p><a href="LINK URL HERE">LINK TEXT HERE</a></p>
</figcaption>
</figure>
</div>
</div>

 

Shutter Vertical HTML
<div class="ds-hover6-wrapper"><div class="ds-hover6">
<h2>TITLE HERE</h2>
<p>&nbsp;</p>
<figure class="ds-hover6"><img src="IMAGE URL HERE"><br><figcaption>
<p>HOVER TITLE HERE</p>
<p><a href="LINK URL HERE">LINK TEXT HERE</a></p>
</figcaption>
</figure>
</div>
</div>

 

Shutter Horizontal HTML
<div class="ds-hover7-wrapper">
<div class="ds-hover7">
<h2>TITLE HERE</h2>
<p>&nbsp;</p>
<figure class="ds-hover7"><img src="IMAGE URL HERE"><br><figcaption>
<p>HOVER TITLE HERE</p>
<p><a href="LINK URL HERE">LINK TEXT HERE</a></p>
</figcaption>
</figure>
</div>
</div>

 

Push Up HTML
<div class="ds-hover8-wrapper">
<div class="ds-hover8">
<h2>TITLE HERE</h2>
<p>&nbsp;</p>
<figure class="ds-hover8"><img src="IMAGE URL HERE"><br><figcaption>
<p>HOVER TITLE HERE</p>
<p><a href="LINK URL HERE">LINK TEXT HERE</a></p>
</figcaption>
</figure>
</div>
</div>

 

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

/*----- Effect 5 - Slide Down -----*/

.ds-hover5-wrapper {
	position: relative;
	color: rgba(0,0,0,0);
	width: 100%
}

.ds-hover5 h2 { 
   position: absolute; 
   z-index: 1;
   top: 20px; 
   left: 20px; 
   font-size: 30px;
   color: #fff;
   background-color: #000;
   padding: 5px;
   -webkit-opacity: 0.75;
   -moz-opacity: 0.75;
   opacity: 0.75;
}

.ds-hover5 p {
	color: #000;
}

.ds-hover5-wrapper:hover .ds-hover5 h2 { 
   -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

figure.ds-hover5 { 
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 0;
	position: relative;
	overflow: hidden; 
}

figure.ds-hover5 img{
	display: block;
}

figure.ds-hover5 figcaption a{
	text-decoration: none;
}

figure.ds-hover5::before, figure.ds-hover5::after{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background: black;
	position: absolute;
	opacity: 0.3;
	top: 0;
	left 0;
	-moz-transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover5 figcaption{
	position: absolute;
	display: block;
	line-height: 1.7em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	background: rgba(255, 255, 255, 0.75);
	padding: 10px;
	z-index: 100;
	width: 50%;
	max-height: 100%;
	overflow: hidden;
	top: 50%;
	left: 0;
	-moz-transform: translate3d(-100%, -50%, 0);
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	opacity: 0;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover5:hover::before{
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

figure.ds-hover5:hover figcaption{
	opacity: 1;
	-moz-transform: translate3d(0, -50%, 0); 
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

Here is the CSS for all four effects

Slide Down CSS
/*----- Effect 5 - Slide Down -----*/

.ds-hover5-wrapper {
	position: relative;
	color: rgba(0,0,0,0);
	width: 100%
}

.ds-hover5 h2 { 
   position: absolute; 
   z-index: 1;
   top: 20px; 
   left: 20px; 
   font-size: 30px;
   color: #fff;
   background-color: #000;
   padding: 5px;
   -webkit-opacity: 0.75;
   -moz-opacity: 0.75;
   opacity: 0.75;
}

.ds-hover5 p {
	color: #000;
}

.ds-hover5-wrapper:hover .ds-hover5 h2 { 
   -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

figure.ds-hover5 { 
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 0;
	position: relative;
	overflow: hidden; 
}

figure.ds-hover5 img{
	display: block;
}

figure.ds-hover5 figcaption a{
	text-decoration: none;
}

figure.ds-hover5::before, figure.ds-hover5::after{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background: black;
	position: absolute;
	opacity: 0.3;
	top: 0;
	left 0;
	-moz-transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover5 figcaption{
	position: absolute;
	display: block;
	line-height: 1.7em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	background: rgba(255, 255, 255, 0.75);
	padding: 10px;
	z-index: 100;
	width: 50%;
	max-height: 100%;
	overflow: hidden;
	top: 50%;
	left: 0;
	-moz-transform: translate3d(-100%, -50%, 0);
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	opacity: 0;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover5:hover::before{
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

figure.ds-hover5:hover figcaption{
	opacity: 1;
	-moz-transform: translate3d(0, -50%, 0); 
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
Shutter Vertical CSS
/*----- Effect 6 - Shutter Vertical -----*/

.ds-hover6-wrapper {
	position: relative;
	color: rgba(0,0,0,0);
	width: 100%
}

.ds-hover6 h2 { 
   position: absolute; 
   z-index: 1;
   bottom: 5px; 
   left: 0px; 
   width: 100%;
   font-size: 30px;
   text-align: center;
   text-transform: uppercase;
   font-size: 25px;
   color: #fff;
   background-color: #000;
   padding: 5px;
   -webkit-opacity: 0.75;
   -moz-opacity: 0.75;
   opacity: 0.75;
}

.ds-hover6 p {
	color: #000;
}

.ds-hover6-wrapper:hover .ds-hover6 h2 { 
   -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

figure.ds-hover6 { 
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 0;
	position: relative;
	overflow: hidden; 
}

figure.ds-hover6 img{
	display: block;
}

figure.ds-hover6 figcaption a{
	text-decoration: none;
}

figure.ds-hover6::before, figure.ds-hover6::after{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background: black;
	position: absolute;
	opacity: 0.3;
	top: 0;
	left 0;
	-moz-transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover6 figcaption{
	position: absolute;
	display: block;
	line-height: 1.7em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	background: #fff;
	padding: 10px;
	z-index: 100;
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	top: 50%;
	left: 0;
	-moz-transform: translate3d(-100%, -50%, 0);
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	opacity: 0;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover6::after{
	-moz-transform: translate3d(0, 100%, 0); 
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

figure.ds-hover6:hover::before{
	-moz-transform: translate3d(0, -50%, 0);
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
}

figure.ds-hover6:hover::after{
	-moz-transform: translate3d(0, 50%, 0);
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
}

figure.ds-hover6:hover figcaption{
	opacity: 1;
	-moz-transform: translate3d(0, -50%, 0);
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
Shutter Horizontal CSS
/*----- Effect 7 - Shutter Horizontal -----*/

.ds-hover7-wrapper {
	position: relative;
	color: rgba(0,0,0,0);
	width: 100%
}

.ds-hover7 h2 { 
   position: absolute; 
   z-index: 1;
   top: 0px; 
   left: 0px; 
   width: 100%;
   font-size: 30px;
   text-align: center;
   text-transform: uppercase;
   font-size: 25px;
   color: #fff;
   background-color: #000;
   padding: 5px;
   -webkit-opacity: 0.75;
   -moz-opacity: 0.75;
   opacity: 0.75;
}

.ds-hover7 p {
	color: #fff;
	font-size: 20px;
}

.ds-hover7-wrapper:hover .ds-hover7 h2 { 
   -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

figure.ds-hover7 { 
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 0;
	position: relative;
	overflow: hidden; 
}

figure.ds-hover7 img{
	display: block;
}

figure.ds-hover7 figcaption a{
	text-decoration: none;
	font-size: 15px;
	border: 1px solid #ff6600;
	padding: 5px 10px;
}

figure.ds-hover7::before, figure.ds-hover7::after{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background: black;
	position: absolute;
	opacity: 0.3;
	top: 0;
	left 0;
	-moz-transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover7 figcaption{
	position: absolute;
	display: block;
	line-height: 1.7em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	background: rgba(0, 0, 0, 0.7);
	padding: 10px;
	z-index: 100;
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	top: 80%;
	left: 0;
	-moz-transform: translate3d(-100%, -50%, 0);
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	opacity: 0;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover7::before{
	-moz-transform: translate3d(-100%, 0, 0); 
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

figure.ds-hover7::after{
	-moz-transform: translate3d(100%, 0, 0); 
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
}

figure.ds-hover7:hover::before{
	-moz-transform: translate3d(-50%, 0, 0);
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);
}

figure.ds-hover7:hover::after{
	-moz-transform: translate3d(50%, 0, 0);
	-webkit-transform: translate3d(50%, 0, 0);
	transform: translate3d(50%, 0, 0);
}

figure.ds-hover7:hover figcaption{
	opacity: 1;
	-moz-transform: translate3d(0, -50%, 0);
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
Push Up CSS
/*----- Effect 8 - Push Up -----*/

.ds-hover8-wrapper {
	position: relative;
	color: rgba(0,0,0,0);
	width: 100%
}

.ds-hover8 h2 { 
   position: absolute; 
   display: block;
   z-index: 1;
   top: 75%; 
   width: 100%;
   font-size: 30px;
   text-align: center;
   text-transform: uppercase;
   font-size: 25px;
   color: #fff;
   background-color: #000;
   padding: 5px;
   -webkit-opacity: 0.75;
   -moz-opacity: 0.75;
   opacity: 0.75;
}

.ds-hover8 p {
	color: #fff;
}

.ds-hover8-wrapper:hover .ds-hover8 h2 { 
   -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

figure.ds-hover8 { 
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 0;
	position: relative;
	overflow: hidden; 
}

figure.ds-hover8 img{
	display: block;
}

figure.ds-hover8 figcaption a{
	text-decoration: none;
}

figure.ds-hover8::before, figure.ds-hover8::after{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background: black;
	position: absolute;
	opacity: 0.3;
	top: 0;
	left 0;
	-moz-transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover8 figcaption{
	position: absolute;
	display: block;
	line-height: 1.7em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	background: #fff;
	padding: 10px;
	z-index: 100;
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	top: 50%;
	left: 0;
	-moz-transform: translate3d(-100%, -50%, 0);
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	opacity: 0;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover8 img{
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.ds-hover8 figcaption{
	top: 100%;
	opacity: 1;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

figure.ds-hover8:hover img{
	-moz-transform: translate3d(0, -30px, 0);
	-webkit-transform: translate3d(0, -30px, 0);
	transform: translate3d(0, -30px, 0);
}

figure.ds-hover8:hover figcaption{
	background-color: #000;
	color: #fff;
	-moz-transform: translate3d(0, -100%, 0); 
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

And that’s it. Now you have some more lovely hover effects to use in your Divi projects.

Don’t forget to check out Recipe #7 for the first four effects.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!