How to Create a Logo Swap Effect in Divi

by | Jul 23, 2018 | Divi Tutorial | 22 comments

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])
});