How to Create a Logo Swap Effect in Divi
In this quick tutorial, I show you how to create a logo swap effect on your Divi site, just like the effect I currently have on mine. It’s a subtle, buy very cool way to add some spice to your Divi designs.
My effect is a simple color inverse but you can add ANY image or media file you want using this effect. It can be a really cool way to incentivize a website user to head back to the homepage.
Enjoy and have some fun!
Here’s the CSS I used:
#logo:hover { content:url(YOUR_MEDIA_URL_HERE); }
***Important***
Firefox and Internet Explorer only know what to do with “content:” if it’s wrapped in a :before or :after pseudo element.
Here’s the workaround courtesy of Benny from the comments below. Add to your functions.php or Integrations Tab in Divi Theme Options.
var imageUrl = [
‘YOUR IMG URL LOGO 1 ‘,
‘YOUR IMG URL LOGO 2’,
];
jQuery(window).on(‘scroll’, function() {
var $header = jQuery(‘header’);
var $logo = jQuery(‘#logo’);
if ($header.hasClass(‘et-fixed-header’)) {
return $logo.attr(‘src’, imageUrl[1]);
};
return $logo.attr(‘src’, imageUrl[0])
});Similar Tutorials and Divi Logo Swapping Effects:
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Hey Josh,
Great tip for dynamic logos.
Just one small thing…
Should your css snippet at the bottom of the tutorial have “content:” included, as it is in the video?
Whoops! Yep forgot to add that in there 🙂 All set now. Thanks, Donal.
Nice,
As well always Great work!! Thanks for such amazing tutorials!
Thank you, Harsh!
Another GREAT tutorial. This also gave me the answer I’ve been struggling with to upload/access an SVG logo. Your tutorials, regardless of the topic are always spot on! Can’t wait for your upcoming course!!!
Thanks so much, Sue! So glad to hear the tutorial helped 🙂 And appreciate the encouragement on the upcoming course! It’s available for pre-order if you wanted to get a big discount before the launch next month!
How would you add an easein transition to this? There are a lot of people wanting to do this with an easeinout 1s or .5s transition. Including me.
You could add transition: 1s all ease-in; in the #logo ID and that should work!
Hi Josh, great tutorial thanks so much.
Is this correct because I can’t seem to get it to work
#logo:hover { content:url(/wp-content/uploads/2019/06/hoverlogoimage-Hover.png);
transition: 1s all ease-in;
}
I also tried this without success:
#logo:hover { content:url(/wp-content/uploads/2019/06/hoverlogoimage-Hover.png);
-webkit-transition: all 0.8s;
transition: all 0.8s;
z-index: 1;
}
Be interested to know what works, many thanks
mmm code looks right. Is that in your child theme? Have you tried clearing cache/refreshing? Could put it in your custom CSS section in Divi to make sure it’s not an issue with your child theme if so.
Excellent video , Hey josh can you put light on the different divi modules with your extraordinary vision?
As the unofficial “Yoda of Divi,” I can only adjust the Divi modules using the force.
Hey!
This is not work in firefox 🙁 Any workarounds?
mmm should work in FF…have you cleared cache and refreshed?
Hey Josh,
No it shouldn’t…FF an IE only know what to do with “content:” if it’s wrapped in a :before or :after pseudo element.
Workaround:
var imageUrl = [
‘YOUR IMG URL LOGO 1 ‘,
‘YOUR IMG URL LOGO 2’,
];
jQuery(window).on(‘scroll’, function() {
var $header = jQuery(‘header’);
var $logo = jQuery(‘#logo’);
if ($header.hasClass(‘et-fixed-header’)) {
return $logo.attr(‘src’, imageUrl[1]);
};
return $logo.attr(‘src’, imageUrl[0])
});
Awesome I wasn’t aware of that. Thanks so much for the workaround! Great little snippet of code. I’ll add that to the tutorial.
I can’t get the code to work, pardon my ignorance but what parts do i need to replace ?
Do i replace ‘YOUR IMG URL LOGO 1 ‘, and ‘YOUR IMG URL LOGO 2’, with the logo URLs ?
or do i leave it as it is…..
Yep replace those 2 with the correct URL then you’re all set!
Hi Josh,
I can’t seem to get it to work. I copied the code and tried in functions.php and also tried it in Intergrations but nothing works.
Hey David that code should go in your style sheet or custom CSS area. See here: https://joshhall.co/where-to-put-your-custom-css-in-divi/
I’m actually working on some new beginner tutorials that will be out shortly to assist with where to put your CSS!
Thanks so much for this. It’s exactly what I needed. I made a cat tail swoosh on hover! 🙂 So cute!