R11: Four More Linkable Image Hover Effects

by | Apr 9, 2016 | Hover, Images

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Four More Linkable Image Hover Effects

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. πŸ™‚

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educatorΒ as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. 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.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

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

You have successfully joined the waitlist!