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 #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
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 
)
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.
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
never mind. got it.
To do multiple image hovers in one row, do you need a separate module for each one?
You can still use a single module since the the styling is defined by the a class being used.
Great tutorial! I wonder is there a way to create a popup box like this https://www.westsidenannies.com/our-nannies/ when you click on read more or the image?
If you are a Divi Academy Club member, the week 62 resource “Popup Anything Without a Plugin” shows how you could do that. This isn’t a free resource, but you get a lot with membership. You can find out more and join at https://divi.academy/membership/
Hi… I’m hoping someone could help me here. I am new to coding. I am looking to use the above effect but as opposed to hovering over an image I would like to hover over a text box (divi text module). For example… the box would read. “Mouse Over to learn more”… I would then apply the over effect. Not sure how to go about it.. thanks for any insight. Mark
Dear Michelle,
It seems like with the new release of Divi this effect is no longer working.
I have now downgraded the Divi version and I solved it, can you please verify?
Thanks
Riccardo
Update Divi and be sure to flush your cache, especially in Divi > Theme Options > Builder > Static CSS
You might need to look at the css for push-left and push-right effects. the z-index for both was set at -1 instead that explains both going invisible. This was for the push left effect .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; SOULTION: .ds-hover-4::before, .ds-hover-4::after { position: absolute; width: 100%; z-index: 1; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(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; as you can see I set this at 100% because at… Read more »
Glad you got it sorted!
the push laft and push right hover animations dont work on my website. They just go slide left or right and go invisible.
If you are using images with a different aspect ratio than what is in the recipe, you will need to adjust the values in the CSS
This has been a great workaround for my image-overlay issue that I’ve been having. I looked over your write up on R22 recently which is, as you’ve noted, out of date due to Divi updates. I’ve adjusted your fade in CSS to show just one colour and to just show the title, and have added an outline like you’ve mentioned in R22. I’m just having one more issue that I wondered if you could help with. Vertical aligning text? It’s currently sitting at the top of the block & I have searched high and low for a solution but have… Read more »
It not a simple task with the way that functionality is designed, and tbh I would do it completely differently now. This free layout may suit you better which is available through my FB group http://divisoup.com/
Thanks very much for your reply, I’ll give this a try!
I want to have 3 images in a row. The row will be full width and gutter width will be 0. I want to have the title on the image and on hover I want the title to disappear and the content text to appear. Is this possible?
Yes, you should just be able to make those adjustments in the Divi row settings and reverse the CSS hover properties
What adjustments do I do in the row settings and how do I reserve the CSS hover properties?
Hi Michelle,
Thank you for all these recipes. I was able to create the effects I wanted too, but while everything is fine with firefox and safari, the “shutters” are not available when I use Chrome (60.0.3112.113 vers.).
Any suggestions?
Thanks, Riccardo
I am afraid I cannot replicate that, I am using version Version 61.0.3163.100 (Official Build) (64-bit) and all is working as it should. I have never had an issue with this working in any version of Chrome
Hey Michelle! thank you so much for these tutorials, they are fenomenal. But I want to do it backwards, I mean, i want to have a text link and on hover, I want the image to appear. Does it make sense to you? is it possible?
I’ll be specting your reply!
Thank you!
You need to reverse the CSS, so move the CSS properties from the hover state to the un-hover state and vice versa
Hello! I’m absolutely in love with this effect, so thank you so much for putting it together! I’m trying to italicize one word in one of the descriptions. I’m going crazy trying different methods of changing the CSS because adding to the html doesn’t work. Any ideas on how I could italicize? Much thanks in advance! Here’s my current code: /*—–Shutter Effect—–*/ .ds-hover-1 { display: inline-block; position: relative; margin: 0px; padding: 0px; overflow: hidden; } .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; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .95;… Read more »
I would need a link to the page and also which text you wish to change
Hey Michelle, this is super dope by the way. Is there a way that I could link ds-desc position to ds-title so they move relative to each other in the Y-axis? (If I explained that poorly, I mean when the title moves downward so would the descriptor relative to it). Right now it seems they are positioned dependent the ds-hover element as a whole, but my knowledge is limited so I could be wrong on that.
Yes, you can apply the same CSS to both attributes and remove the one you are not using
Thanks a lot
How about youtube thumbnails? If I want to use this effect with this image:
This recipe only says “play around with percentages” but I’m really tired to playing around with percentages because it only messes everything up.
Sorry but I don’t see the image. Check you are using the image sizes specified in the tutorial
Hey, thanks for sharing. It work´s great!
I have one problem.. i will do some text formatting with paragraphs!
How i can do this?
Here is the test link!
First picture is the test picture!
The text should been:
ROMAN ZOTTER
Geschäftsführer
Heizung-, Gas-, Wasserinstallationsmeister
Tel.:
Mail:
The link:
http://zotterbad.at/neu2017/mitarbeiter/
Check here for the solution https://divisoup.com/four-linkable-image-hover-effects/#comment-826
Hi admin
There seems to be an issue with the code? The text, doesn’t show up on the hover? ie. the title and description its just blank.
if you could help me figure how to fix this it would be much appreciated
Do you have a link please so I can see where you have made an error?
Hi,
Great work, thanks for sharing!
But, how can I add a second paragraph in ds-desc?
Try wrapping your description text in paragraph tags Guilherme
Doesn’t works. It disappears.
Check my comment here for an alternative solution https://divisoup.com/four-linkable-image-hover-effects/#comment-826
Hi Admin
Love the hover effects!! I seem to have trouble with the text. The text appears then disappears when you hover the mouse over the image.
Can I see a link please Hayley
Hi I seemed to have fix the issue now , in your code for push right, the line z index was at -1 when I changed it to 1 the text appeared. Might be something to take a look at for the future. Thanks for getting back to me.
That’s odd, it is working perfectly in my demo. There may be something else in your particular set up that is affecting it but glad you got it sorted
Hi Michelle,
On a clients site I have multiple Shutter Effect modules, but the client requires a longer title on ONE of the modules, I know that I can amend the overall font size in the CSS but this affects all modules, how can i adjust the single module?
I have tried adding – font-size: 40px; to the advanced sections but can’t seem to get any results.
Any help appreciated.
Le
Give that module an additional class and then style the text in your style sheet using just that class. Make sure you place the CSS declaration below the other CSS, and you may need !important
Hi admin,
I can not add the title and description on after hover..
Sorry but I will need some more detail of your issue to be able to help
Hi Michelle Nunan, thanks for the tutorial. What is the code to add the effect in reverse format. When users hover the mouse over the text – the image should appear (for the push right or left) – this we can use for NSFW images, providing a description to the user that image is 18+ (art nude)
The reverse effect would not work with this tutorial as it would be a different set up, this may help https://eileenlonergan.com/how-to-get-an-image-to-swap-on-hover-with-divi/
Unfortunately, none of these work. Apparently, whatever updates ET has done in the framework has broken these customization. I’m bummed because every image animation I’ve tried from other dev doesn’t work either.
These still work just fine Matt. The issue is tags being stripped from the content area of the module. Check this post for potential solutions https://elegantmarketplace.com/help-my-paragraphs-and-line-breaks-keep-disappearing-from-the-divi-text-module/
Wow thanks
question? How can i open the link in a new tab ? Thank you
add target=”_blank” after the url in the link
:* Thank you very much!!!
Great article!
Works fine with my project, I just have a little thing that I would like to change. I get a grey line on top of the image when the mouse is not hovering above it. Do you have any idea on how to fix that?
Thanks in advance,
Florian
I would need to see a link please
I have a similar issue with a grey 1px line above my image.
Can I send you the link in private?
Yes of course
It worked like a charm. Thank you for sharing this.
I submitted a comment yesterday regarding an issue that I found when I try to center an image within the Divi text module on the flex implementation. I still haven’t heard anything back and now my comment has disappeared from this page. Does that mean I don’t get an answer or any help?
Comments go into moderation to avoid spam Steve. I do get to them as soon as I can but just went through a house move and have been without broadband for 3 weeks so things slipped a bit.
I’m having an issue. When I center an image within the text module, the hover is shifted to the right and doesn’t cover the image.
Any ideas. You can see it on the site below.
I don’t see it here but I am pretty late in answering…
hi, i’m trying to figure out where to put what. i have 4 images on my cover page. i wish for them to lead to parts of the program on my page. so when i put overlay it doesnt show image title which is actually all i need., i tried this tutorial but i’m not a developer and i don’t know that much on css and coding. so i used text module, i copied tekst, in which i only need name and link and image link. and i stuck on css, i don’t know where to copy what . did… Read more »
You can change the html to this to remove the additional text
And then use anchor links to navigate to the section of the page you want, this post explains anchor links https://elegantmarketplace.com/how-to-build-a-one-page-navigation-menu-bar-how-to-add-an-anchor-link-to-a-button-for-a-one-page-website/
I built your shutter effect and it work GREAT with a Chrome browser but looks like crap with IE and won’t even show the shutter or the text… images are all on top of each other…
Any suggestions?
I obviously have to ensure that any of the common browsers would work…
Also…
I would like to center the hover title and text…
Can I just add the text-align:center under the font commands in the two sections that deal with the shutter header and text?
Hi Terri
I am afraid I don’t design for IE, if I try to open it, it just crashes my computers so I don’t even have it installed anymore.
If you need to consider IE for your clients you can use this service to check if CSS effects are supported before you try to implement anything. http://caniuse.com/
Yes you should be able to use text-align: center;
Hi Michelle, Thanks for the great shutter effect. I have used it (in a Divi theme – http://www.allied.ie), but lately I noticed it did not work with IE11. So after some Googleing and playing around a media query (hack) that only targets IE10 & 11, I got this to take care of the problem, so I thought I’d share it with you and you followers… @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ .ds-hover-1 { display: run-in; }} display: inline-block; does not seem to will not work with IE11 in this CSS setup,… Read more »
Thanks for sharing Robin, very helpful
Hi Robin F, very useful that you posted this code. How exactly do I use your code above to ensure this also works for IE10 and 11?
Michelle thanks for all your awsome work.
Please tell me how I can do this effects on image gallery? I try all but I do not have luck.
I have one more question, if you can help me. In gallery image I want 2 images but with margin between them. Is some magic css code?
Thanks, thanks for 1000 time! :*
Take a look at this tutorial instead Bianca, I think it will be better for your needs
https://divisoup.com/how-to-add-links-to-the-divi-gallery-module-and-show-captions-on-hover/
Thanks for the recipe. I’m not a cook though so it’s not coming out like your recipe did. I downloaded the .xml file and followed the installation instructions. So far, so good. Copied the .css. Still good. Opened up the demo page and tried previewing it to see if it was working…pictures are there, but the effects aren’t working. Earlier I tried doing it on my own with my own image but had the same problem. I thought it was because I was using a different size image and more text so I deleted everything (including the .css code) and… Read more »
Do you have a link please Deborah?
Great stuff Michelle.
Adam
ps. I just registered however even though I have your registration acknowledgement email, when I tried to login I get:
“Error: A user could not be found with this email address.”
Sounds like you registered for my email list rather than the site Adam?
Yes you were right…thanks Michelle.
Hi Michelle, I had the same problem with the Title being overlapping as it is too large on smaller mobile screens..
This can be fixed by adding this code:
@media only screen and ( max-width: 480px ) {
.ds-hover-4::before {
font-size: 24px !important;
}
}
@media only screen and ( max-width: 480px ) {
.ds-hover-4::after {
font-size: 14px !important;
}
}
Seems to work.. users just need to change the number is the class id (either 1,2,3,4) in the .ds-hover-4 according to the style they choose to follow..
Let me know if there are better way to do this..
I implemented this on
WOW!!! AWESOME!!! This is GREAT!!!
I had this installed, color changed, and working in about 20 minutes. Couldn’t figure out line breaks, then I found your ” white-space: pre-wrap;” fix, and it worked like a charm…
One small request though, any idea if you can get this working with the “Person” module? It would be really cool to have their name as the title, their title as a sub-title in the top block, and then their description, with the description.
I stumbled onto your website by accident, but I am so glad I found my way here…
Thanks again!!!
Curt
Glad its useful Curt.
The person module is probably one of the least used modules in Divi so there aren’t many tutorial around it but this one on the blurbs would be just as effective https://creativechildthemes.com/blog/blurb-module-new-style-hover-expand/
Hey Michelle, first off this is dope. However I am having an issue whenever I try to copy and paste this css into Divi it just keeps trying to save but never actually does. Divi will not save the code it just keeps spinning the wheel. Any suggestions on fixing this?
Try the solutions in this post Christian https://elegantmarketplace.com/divi-2-6-is-here-now-what/
hi Michele, thanks for this!
i have an issue with the code, i use the code module, the code work fine but for some reason part of the code is missing when i come back to watch the page, or close the site and open again for work another day.
TinyMCE is working too with the texts in code module? is odd, but, i dont know what else to do, i tryed bloking the module, but still part of the code desapear.
Have you checked all the comments for this post Vivi, this has been answered a few times I think so make sure you have tried everything.
Michelle,
I love this tutorial. I notice you mentioned with three images, the size and content will be limited. Is there a way to increase that size? Let me know…and keep up the Great Work!!!
Not really Daniel, as what I mean is you are limited by the size of the screen, so the less images you have horizontally, the more space you have for text
Great tutorial and I love the effects.
I’m having a problem with paragraph returns.
I have added “white-space: pre-wrap;” after
.ds-hover-3::before {
content: attr(ds-title);
And I can see the paragraph returns if I use a Text module but they don’t appear when I use a Code module – any ideas.
Are you having any issues with tag stripping using a text module? If not try using that instead
Hi Michelle, This is a great resource, thank you for taking the time to help the rest of us.
I want to have a caption over my images which are in 1 row with 3 image modules.
Would your fade code work with 3 images in a row?
I want to put a title and not just an icon over my “website portfolio” images.
Many thanks
Yes they will work with 3 images. If you want a title to show prior to hover you can try these ones instead https://divisoup.com/four-more-linkable-image-hover-effects/
Hey Michelle
Super weird, I’ve been using this for a while now but when i post my homepage URL on Facebook it pulls through the three images that i have used this on… what could be causing that? i have yoast and i’ve set a default image as well as a featured image but still these three pull through. any ideas?
Have you set the image to use within facebook? If yes then try running the page through this a few times and see if it updates https://developers.facebook.com/tools/debug/
Hi Michelle, like everyone says these effects are superb but unlike everyone else I just cannot get them to work. I’m trying the shutter effect. I have a child theme and have carefully copied the CSS there. I’m using the code module and have set up the HTML there. I have a site that I’m using to try out different effects and to familiarise myself with Divi etc. but this is just not working for me – all your other correspondents seem to have it working where am I going wrong?
Please ignore my last comment as now, all of a sudden, without me doing anything further, it’s working!! Gremlins, they get everywhere don’t they?
Indeed they do Brian
Are you sure you added the custom classes to the modules? If yes can you post a link please?
Hi Michelle sorry I’m still struggling a little, it’ll more than likely be something and nothing. But I can’t get the to work within the ds-desc= section
How is it not working David, what exactly do you see?
Hi Michelle,
Really love these hover overs. Is there any way I can add bullet points in the main description areas?
You should be able to add an unordered list David, so:
Thanks Michelle, sometime I lose the woods for the trees stupid me.
Hi Michelle, these effects are really great!
I just trying to adapt it to use in divi shop module, but no sucess.
Do u know any way to insert the product title (h3) above of the image? like this: http://uhurudesign.com/furniture ?
Thanks in advance.
Hi. Great tutorial thanks. I have an issue with the overlay that I can’t seem to fix? See url here: http://waloudesign.com/avirtualcareers/
3rd section down. i have to change padding of modules to fit with other images modules in the grid but now the overlay is only 50% of the image. I’ve tried changing a few of the values in css but can’t find solution. Bit of a newb!
If you could help that would be amazingly kind!
H
You can just add:
left: 0;
to both of these sections of CSS:
.ds-hover-1::before
.ds-hover-1::after
Hi Michelle,
Is it possible to use the image module instead of the text or code module and achieve the hover effect? Thank you for such great tutorials.
Not with this no Sandy as the image module has no place to add the hover text
Hey great effect! Just wondering if we wanted to change the colours how would we do this?
The colours are all in the CSS so just look for the hex or rgb codes and change those
hi , thank you very much for the tip : very useful . However i don’t know how to change the color from orange to blue , is it even possible?
Yes the rgb values are set in the css so just change those to what you need
Thank you for the tip, it looks cool!
Made my website more interactive as well
Great! Does it work with full weight image (one column)?
You can try Jola but may need to make some modifications
Hello Michelle,
great article. Very stylish!
I use it on my Ayurveda Yoga website ).
But between 2 rows there are always a white stripe.
All padding and margin I have set on zero, but the stripe is always there.
Can you give me a hint?
Juri from germany.
You can add a little negative margin to the top row, 6px works for me
margin-bottom: -6px;
Love this effect and really want to use it on my site but can’t seem to get rid of that little white line. I tried adding the margin-bottom:-6px to the top row but then my fullwidth image beneath it gets pushed over. Any idea how to fix to work with a fullwidth image beneath it? Thanks for your help!
Do you have a link Angela?
Hi there,
Thanks for the code for these effects.
I just have one question. There seems to be a gap in between my images as they don’t but up against eachother. I was wondering where I can adjust this in the code?
Thanks
ps: I am using the code modules in separate rows.
Thanks
Hi
The images are in individual modules so they will have space between them unless you adjust the padding/margin in the section/row/modules
You have given me so many ideas for upcoming website projects!!! Thank you for your inspiration, the time you put in to do this and your passion for this!! I have currently added this effect to my site, http://www.taketheland.net, and every few times that I update the page, the code for the hover effect goes back to this:
and I have to redo. Why is this? Can you give some direction in converting all of my css to a child theme? I have never used one and you always suggest that I should. Please let me know, thank you!
Hi Antonio
Thank you so much for your kind words
The stripping code thing is a common WP issue. You can use a code module instead which should eliminate this issue but also have a read of this article..
https://elegantmarketplace.com/help-my-paragraphs-and-line-breaks-keep-disappearing-from-the-divi-text-module/
As for a child theme, use this child theme maker and paste your existing CSS into the box provided…
https://elegantmarketplace.com/child-theme-maker/
Great Effects! Quick Question, I used the shutter effect on a client proof, and it is not showing properly when they view it on IE11….do you know of any compatibility issues with internet explorer? Thanks
I’m afraid IE has compatibility issues with far too many newer effects Chad and I am quite open about the fact that I do not develop with IE in mind, whether that be right or wrong, it is just the way I work.
There may be some vendor prefixes you can try but I do not even have IE on any of my computers to test for you as it always crashes them, sorry
Thanks Michelle, I just waned to check and see, and make sure it was and IE issue. It dose work on Microsoft Edge, and looks great overall. Thanks for the reply.
No problem Chad
Great resource Michelle, I used your Fade CSS to make the hover effect I needed (after a LOT of work). Any Idea how I’d make the image title appear all the time, not just when hovering ? Thanks
Try this one instead David https://divisoup.com/four-more-linkable-image-hover-effects
Hi Michelle, Thanks for the quick reply. I tried those other hover effects which are really great. However they brake on mobile devices, the Title goes above the image and the Hover Title below. Perhaps its something in my code, I am not sure. I wonder has anyone else had this issue ? Of course as a work around I can just use a different element to display on the phone, since hover doesn’t work anyway.
Check the demo on mobile David, they work fine for me (at least on Apple products) and if you touch them you get the hover effect.
Great piece of work Michelle
works like a charm.
Is there a way to add a Tittle or text before the hovering effect as a layer on the initial picture? I’m trying to create an image with info first and as you hover then you get the description, hope it makes sense.
Try this one Gabriel
https://divisoup.com/four-more-linkable-image-hover-effects/
Hi Michelle, Greta link I absolutely created a great looking effect. I did however encounter a problem when switching to a bigger screen. The pictures seem to not center accordingly or proportionally to the screen size. When I use a 1080px screen using your recommended sixe 480x320px it looks perfect, but when I blow it up on a bigger screen, it adjust to a different layout. I’m using a code module (I used this as the text module remove the code after a while) on a 2 column layout. The left code module appears on the left size of the… Read more »
Hi Gabriel
Yes you can just use larger images but be sure to keep the aspect ratio so as not to throw out the CSS. If you want the images to always fill the module then I would advise taking the largest screen resolution, lets say 1920px and then dividing that in two for a two column layout. So images at 960×640 to keep the aspect ratio.
Hope that helps
Hi Michelle
Just wanted to thank you for this awesome recipe – this was perfect for a request I got to do exactly what option 1 does – just had to tweak the colours and I turned the request around in less than 30 minutes – client was stunned!
Thanks for making me look like an awesome developer
Haha, my pleasure Cliff. Glad your client was pleased
did i miss something? hand made customizing with content seems to make a lot of work – looks nice but who will coding all day long for stuff like this?
Hey Dieter, its actually quite a simple process and once you have the CSS in your stylesheet you can add anywhere in just a few minutes
Awesome, this works like a charm, been spending all day looking for something like this!!!, Thxs
My pleasure Ricardo
hi, thank you so much! a wonderful site with a lot if nice tools – thank you.
michelle, is ist possible to break text inside the box? sincerely, agnes
Hi Agnes, you should be able to use tags for this
Great Job. I tried using the break tag in the text as well as the code module and it doesn’t seem to be working. Any Ideas? Example:
<a class="ds-hover-1" href="http://thesearancharttour.com/wp-content/uploads/2016/06/TheSeaRanchArtTour2016.pdf" target="_blank" "="" ds-title="the sea ranch art tour" ds-desc="LABOR DAY WEEKEND September 3, 4, & 5 Click here to download the 2016 Collector’s Guide”>
Hi Marco Yes you can do this with just a tiny CSS addition. So find this part of the original code (dependant on the effect you are using): .ds-hover-1::before { content: attr(ds-desc); And underneath add white-space: pre-wrap; So it looks like this .ds-hover-1::before { content: attr(ds-desc); white-space: pre-wrap; Obviously keep all the other CSS that is there. Now you will be able to just hit the return key for your line breaks. Hope that helps
sorry for asking – of course i changed the colour – best regards!!!
Glad you got it sorted Michael
hi,
nice work, thank you very much!! is it possible to change the orange colour of the effect into a #1cbac8? i want to redesign the whole web…
regards from austria, michael
Hi Michelle,
Thank you for your cool recipes.
I use the Push Right on one of my projects. But I want to add a “button” like box under the description, on the same color box, or under, doesn’t matter, only to show on hover over the image.
I add this in the HTML: ds-button=”Button Text” . How can I add the content: attr(ds-button); it in the CSS ? I’m not that good with this.
Thank you in advance,
Gabriel
Hi Gabriel
Have a look at the follow up effects here: https://divisoup.com/four-more-linkable-image-hover-effects-demo/
There is a version with text styled as a button
These are awesome, thanks Michelle.
Is there any chance yo are working on a way to do these effects on the project images in the portfolio modules ?
Not currently Gareth but you never know, if time permits
Hi Michelle
I am new to DIVI new to wordpress actually but I managed to get this working straight away , just one issue I am encountering is a space after this module and before my next module . Anyway to solve the issue ?
Yes, just play with the custom padding and margin settings within the sections, rows and modules to get the spacing you want
Love the Hover effects! I’m a new WP developer and this really makes my test page sizzle. I adapted the CSS a bit for Font height, etc. so it ft my needs, which was a snap. Thanks so much for sharing this!
The only (small) problem I’m having is positioning a simple text module immediately above the hover text i.e. with no or very little space between them – adjusting the padding in DIVI made no difference. Maybe I need to adjust to within the CSS?
Hi Paul
Try adjusting the margin rather than the padding. If no joy then use chrome dev tools to inspect the element so you can see specifically what you need to target
Hi Michelle, the effect looks great on desktop.
Only thing is I can’t get it centered on (horizontal view) tablet.
Just trying to disable it on tablet and phone. It disables on both except that it still shows up on tablet (in horizontal view, I guess it’s emulating a Desktop). Any insight as to how disable totally on tablets or how to centre the effect?
Thank you
You should just be able to use the center text option in the module. To disable in tablet landscape mode you will need a media query.
Good evening Michelle,
talked to you via facebook this morning.
Again somehow screwed up. Went through you tutorial about a million times!!!
Please check out the follwing website
There I have this picture of Mexico.
I can not find out what is wrong.
Waiting for your helping hand… thank you!
best regard from Germany,
Chris
Try again Christopher, as I mentioned, you accessed whilst I was testing, it is ready now
PS – I can’t reply to your emails for some reason, the email address is getting rejected!
Thank you Michelle. these are great! I’d really like to add a photo under meet our team and when you hover over it it changes to another photo of them. Please can you add this code sometime.
Thanks again – so helpful
If I get the time sure Kate
Hi Michelle,
It’s a nice effect on images, looks great. I am trying to achieve the same effect with post images. As with the current situation, ds-title & ds-desc is defined in the html itself. Is it possible to generalize it, like using post title as ds-title & post excerpt as ds-desc?
I’m not sure Manas, I will have to look into it and see how it could be achieved when I have the time
Hey Michelle. Love the effects. This is looking crazy on iPad, though. When you scroll down the page the orange hover effect with white text covers most if the screen.
Hi Jonathan
Yes I had a little bit of stray CSS messing with it, all fixed now!
Thank you very much! It works
It is my first using of code! I am very happy. I have tried to bring 3 photos in a row with fillwidth and now space between the photos. Even this works, but it is not responsive. If the Display goes to a width of 1920×1080 then there will be a space between the pics.
Thanks Nadine, you will need to use a custom gutter of 1 and adjust the the padding and margins to get your desired look
Michelle, just want to say that this is such a great resource. I haven’t been able to use it yet, but I keep seeing it pop up on Facebook and I can’t wait to try it out. I’d love to see more photo and gallery hover overlay tutorials down the line. Keep up the great work!
Thanks so much for your kind words Jeremy
I am planning more hover effects in the not too distant future so be sure to sign up to my email list so you don’t miss anything 
Thanks Michelle! What is the size of the image you used in your example?
Hey Jennifer, mine are 480x320px. You can change the size and it should be fine as long as you keep the aspect ratio
Hello,
Sounds impressive effects !
I’ve tasted the image hover with fading text effect but it seems the transparent background doesn’t cover the whole image with only a few words text ?
I need to enter at least a complete textline to cover the image, and with several textlines my paragraph is right-aligned ?
I’ve managed to change the background transparency color with Chrome browser’s inspector but can’t find the text alignment trick…
What did I wrong ; can you please help ?
Thanks and congratulations again for the tasty recipes…
(a french Divi gourmet..)
Hey Claude, you can change the alignment from within the module or use css for the particular effect you are using
Great solution, just what I needed. Best of luck with this great site. One question!
How do you get the accordion fields to close when clicked?
The default in Divi doesn’t allow for this. One closes only after another has been opened….
If you share your solution, I have asked on the Facebook groups related to Divi, I will be eternally grateful, and report back with your site details
Best Regards
Ray from the UK
Thanks Ray
The simplest solution to your accordion issue is to use toggles instead. Almost identical looking but with the functionality you want
Hello, I have a question. I have installed the Linkable Image Hover Effects. But every time I add/ change a new section, text or something else the text in the the text module is deleted ???
Hi Florian
I know I replied to you on my Facebook Page but just for everyone elses’ benefit, if you are having trouble with WordPress striping out the tags as is happening in this instance, then just use a code module instead of a text module and all should be fine
Hello Michelle,
Thank you for this amazing recipe! I have the same problem; everytime I change a module on the page, the text content of my image disappear, even though I change my module for a code module. Any clue?
Thank you!
It really shouldn’t disappear in a code module Pierre, can you paste what you are using?
Hi! Thank you for your quick answer!
It goes from:
To:
Sorry Pierre I’m not seeing that code. please email me using the contact form
Dear Michlle, thank you so much for this.. it looks great.. I just have a question.. is it possible to have the photos rounded corners?
Hi Andrew
Thanks for your comments
I haven’t tested with rounded corners but in theory yes you should be able to add a border-radius: 25px; for example to achieve the effect you want.
Dear Michelle,
That worked like a charm! Thank you so much! Keep up the good work!! =)
Thank you for the recipe Michelle – it looks great
You’re welcome Dieter
Thank you for the recipe – brilliant!
Pleasure Amanda ::)
Thank you; This beats, Any “Cookery Class” I have ever done. Clear and concise; and what’s more “No Service Charge” ..
Haha, thanks
How can I increase the size of the image showing in the background?
You can just use larger images James
Hi There
Really keen to try this – is there a way I could use it over the image used in the blurb module? Instead of using the text module? Or in images used in photo galleries?
Many thanks
Hi Les
This code wouldn’t work for that without some major adjustments but I plan on some gallery hover effect recipes in the near future
Thanks Michelle
Look forward to seeing that;)
Hey, what a fun and potentially useful recipe. content: attr(ds-desc); – Very cool with loads of possibilities.
Cheers Flash
Michelle, thank you so much for sharing! Great effects to kick-start my Divi CSS learning curve. Am new to all this, so your clear instructions are a treasure. I can see my Child Theme style.css getting longer and longer (am I doing it right?) as I browse through your “recipes”!
Yes you’re doing it right Desiré
Your Kitchen really rocks and rules Michelle.
Thank you Glenn!
As soon as I saw this I was like ‘yes! I need this! I’m sick, tired, and should go to bed, but I have to get this working RIGHT NOW’. Thanks!
Love the concept of this site, too. Miso glad I found it.
Thanks Andrew that’s very kind
Lovely…looking for which project I can try it on! Nice work. Thanks.
Pleasure Sheila, thank you
Very Nice! Going to use it immediately, many thanks!
Thanks Dehn
Great effect, just wondering, would this work well on mobile/tablets?
Thans! Hover effects do not work on touch screen devices (there are a few exceptions) so generally no it doesn’t
Thanks for the reply, is it possible (in css) to replace the “hover” with “scroll” (or something similar)
so that the animation happens as you scroll down a page on mobile/desktop?
Thx again.
It requires some JS, you can find a Pen here http://codepen.io/benske/pen/yJoqz
Excellent work!
Thanks Terry