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