Logo change on hover

Support
#1

I used the code depicted in this old post: https://theme.co/apex/forums/topic/logo-hover-change-image.

a.x-brand.img:hover::after {
  content: url(https://carteblanche.media/wp-content/uploads/2017/01/carteblachemedia_logo.png);
}

a.x-brand.img:hover img {
  display: none;
}

It works, but the image isn’t properly sized, probably has to do with the retina logo (images are same size). Draft demo (hover on top logo).

#2

Hello @heroboard,

Thanks for asking. :slight_smile:

Have you removed the code entirely as I don’t see hover effect on the logo? Can you please confirm?

Thanks.

#3

That draft is still up there. https://www.youtube.com/watch?v=j4Y8D8k2dSY. I didn’t remove the code.

#4

Hi any ideas?

#5

Hi there,

Please remove the CSS you added and try this in the Global JS instead:

(function($){

    $('.x-brand').hover(function () {          
        $(this).find( "img" ).attr( "src", "https://www.heroboard.es/wp-content/uploads/2018/03/Face_01.png" );
    },function () {
        $(this).find( "img" ).attr( "src", "https://www.heroboard.es/wp-content/uploads/2018/03/Logo_01_Black.png" );
    });

})(jQuery);
1 Like
#6

It worked, thanks :slight_smile:

#7

You’re welcome.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.