Four Linkable Image Hover Effects

by | Feb 27, 2016 | CSS Tips & Tricks, Hover, Images

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

Four Linkable Image Hover Effects

Recipe #7 is again something I have seen asked in the Facebook groups quite frequently lately. Four linkable image hover effects which show descriptions for use in your Divi projects. I saw some of these on tympanus.net but as usual, they didn’t work out of the box with Divi so required some major tweaking and I have also put my own stamp on them. You could use these to link to portfolios, galleries, service pages or just about anything really.

UPDATE: It seems that WordPress has been up to its usual tricks again of striping out code from the text module on import. Therefore I have edited the demo file and used the code module instead. If you downloaded the demo before 20th March 2016 then it’s likely you will run into this issue so please re-download and you will get the updated content πŸ™‚

Hover over the image below or click here to see the live demo of all four effects and download the xml file

Image Hover Effect

So let's get cooking!

ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes
A suitable image (mine are 480x320px)

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 (shutter) but the process is the same for all of them.

Create a new section with one column and add a text module. (Update: If you are having trouble with WordPress striping out the code then please use the code module instead of the text module and you should be all good πŸ™‚ )

If you are using the ‘Push’ effect you also want to make sure your section is set to transparent background otherwise you won’t see the hover. (took me a while to work out why that was happening πŸ˜‰ )

Four Linkable Image Hover Effects Tutorial for Divi

method

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

<a class="ds-hover-1" href="Link URL Here" ds-title="Title Here" ds-desc="Description Here."><img src="Image URL Here" alt="Alt text Here" class=""></a>

You will need to add your link URL, title, description, image URL and alt text depending on what you want to show. Keep in mind that you only have a limited amount of space or the text will run over the bottom of the image and you won’t see it but you can play with this. Also, if you decide to have 3 or 4 images in one row then your available space will be less.

Four Linkable Image Hover Effects Tutorial for Divi

Here is the code for each effect

Shutter HTML
<a class="ds-hover-1" href="Link URL Here" ds-title="Title Here" ds-desc="Description Here."><img src="Image URL Here" alt="Alt text Here"></a>
Push Right HTML
<a class="ds-hover-2" href="Link URL Here" ds-title="Title Here" ds-desc="Description Here."><img src="Image URL Here" alt="Alt text Here"></a>

Β 

Fade HTML
<a class="ds-hover-3" href="Link URL Here" ds-title="Title Here" ds-desc="Description Here."><img src="Image URL Here" alt="Alt text Here"></a>
Push Left HTML
<a class="ds-hover-4" href="Link URL Here" ds-title="Title Here" ds-desc="Description Here."><img src="Image URL Here" alt="Alt text Here"></a>

Β 

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.

/*-----Shutter Effect-----*/

.ds-hover-1 {
    display: inline-block;
	position: relative;
	margin: 0px;
	overflow: hidden;
	background: #000;
}

.ds-hover-1 img {
	display: block;
	max-width: 100%;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.ds-hover-1:hover img {
	opacity: 0.5;
}

.ds-hover-1::after {
	content: attr(ds-title);
	position: absolute;
	height: 12%;
	color: #fff;
    z-index: 1;
	top: 0;
	width: 90%;
	background: rgba(0,0,0,0.5);
	font-weight: 300;
	font-size: 40px;
	text-transform: uppercase;
	padding: 5%;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}

.ds-hover-1::before {
	content: attr(ds-desc);
	position: absolute;
	height: 100%;
	color: #fff;
	z-index: 1;
	top: 27%;
	width: initial;
	background: rgba(255,102,0,0.5);
	font-size: 16px;
	padding: 2% 5% 5% 5%;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}

.ds-hover-1:hover::after,
.ds-hover-1:hover::before {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

If you keep the image aspect ratio I have used then this should work just fine, but if your images have a different aspect ratio then you may need to play around with the percentages in theΒ .ds-hover-1::before Β andΒ .ds-hover-1::after sections of the CSS.

Here is the CSS for all four effects

Shutter CSS
/*-----Shutter Effect-----*/

.ds-hover-1 {
    display: inline-block;
	position: relative;
	margin: 0px;
	overflow: hidden;
	background: #000;
}

.ds-hover-1 img {
	display: block;
	max-width: 100%;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.ds-hover-1:hover img {
	opacity: 0.5;
}

.ds-hover-1::after {
	content: attr(ds-title);
	position: absolute;
	height: 12%;
	color: #fff;
    z-index: 1;
	top: 0;
	width: 90%;
	background: rgba(0,0,0,0.5);
	font-weight: 300;
	font-size: 40px;
	text-transform: uppercase;
	padding: 5%;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}

.ds-hover-1::before {
	content: attr(ds-desc);
	position: absolute;
	height: 100%;
	color: #fff;
	z-index: 1;
	top: 27%;
	width: initial;
	background: rgba(255,102,0,0.5);
	font-size: 16px;
	padding: 2% 5% 5% 5%;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}

.ds-hover-1:hover::after,
.ds-hover-1:hover::before {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

Β 

Push Right CSS
/*-----Push Right-----*/

.ds-hover-2 {
   	display: inline-block;
	position: relative;
	overflow: hidden;
	background: rgba(0,0,0,0.2);
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	transition: background 0.3s ease-in-out;
}

.ds-hover-2:hover {
	background: rgba(0,0,0,0);
}

.ds-hover-2 img {
	display: block;
	max-width: 100%;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.ds-hover-2:hover img {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

.ds-hover-2::before,
.ds-hover-2::after {
	position: absolute;
	width: 100%;
	z-index: -1;
	-webkit-transform: translateX(-30%);
	-moz-transform: translateX(-30%);
	transform: translateX(-30%);
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.ds-hover-2::before {
	content: attr(ds-title);
	height: 30%;
	background-color: #000;
	color: #ffffff;
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 300;
	padding: 7% 5%;
}

.ds-hover-2::after {
	content: attr(ds-desc);
	top: 30%;
	height: 70%;
	width: initial;
	background-color: #ff6600;
	color: #fff;
	font-size: 16px;
	padding: 5%;
}

.ds-hover-2:hover::before,
.ds-hover-2:hover::after  {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}

Β 

Fade CSS
/*-----Fade Effect-----*/

.ds-hover-3 {
	display: inline-block;
	position: relative;
	
}

.ds-hover-3 img {
	display: block;
	max-width: 100%;
}

.ds-hover-3::before,
.ds-hover-3::after {
	opacity: 0;
	position: absolute;
	width: 90%;
	color: #fff;
	padding: 5%;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.ds-hover-3::before {
	content: attr(ds-title);
	top: 0;
	height: 10%;
	background: rgba(0,0,0,0.5);
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 300;
}

.ds-hover-3::after {
	content: attr(ds-desc);
	top: 25%;
	height: 60%;
	width: initial;
	background: rgba(255,102,0,0.5);
	font-size: 16px;
	text-align: right;
}

.ds-hover-3:hover::before,
.ds-hover-3:hover::after {
	opacity: 1;
}

Β 

Push Left CSS
/*-----Push Left-----*/

.ds-hover-4 {
   	display: inline-block;
	position: relative;
	overflow: hidden;
	background: rgba(0,0,0,0.2);
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	transition: background 0.3s ease-in-out;
}

.ds-hover-4:hover {
	background: rgba(0,0,0,0);
}

.ds-hover-4 img {
	display: block;
	max-width: 100%;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.ds-hover-4:hover img {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
}

.ds-hover-4::before,
.ds-hover-4::after {
	position: absolute;
	width: 100%;
	z-index: -1;
	-webkit-transform: translateX(70%);
	-moz-transform: translateX(70%);
	transform: translateX(70%);
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.ds-hover-4::before {
	content: attr(ds-title);
	height: 30%;
	background-color: #000;
	color: #ffffff;
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 300;
	padding: 7% 5%;
}

.ds-hover-4::after {
	content: attr(ds-desc);
	top: 30%;
	height: 70%;
	width: initial;
	background-color: #ff6600;
	color: #fff;
	font-size: 16px;
	text-align: right;
	padding: 5%;
}

.ds-hover-4:hover::before,
.ds-hover-4:hover::after  {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}

Β 

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

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 freelance web designer 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 me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
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!