animated gif on hover

Hi.

Show me an online example of your implementation. Your custom script parts also will be helpful. Then I can try to help.

Regards, nK.

Hi
Thanks for your reply.
This website does this kind of hover animation : https://wizz.fr/ (in the projects section)
my website is at : https://www.studio-oracle.fr
and I tried a very simple jquery to replace the static image by an animated GIF like this :
jQuery(function($) {
$(“img.attachment-vp_xl”).on(
{ “mouseover” : function() { this.src = ‘https://www.studio-oracle.fr/wp-content/uploads/2018/11/ESCAPE-TIME_1.gif’; }
, “mouseout” : function() { this.src=’images/tile_4.jpg’; }
});
});

Hi.

The images use srcset attribute, so you also need to change it. This example should work:

jQuery(function($) {
    $(document).on('mouseover', '.vp-portfolio__item-img img', function() {
        var $this = $(this);

        // save old image.
        $this.attr({
            'data-saved-src': $this.attr('src'),
            'data-saved-srcset': $this.attr('srcset'),
        });

        // add gif.
        $this.attr({
            src: 'https://www.studio-oracle.fr/wp-content/uploads/2018/11/ESCAPE-TIME_1.gif',
            srcset: '',
        });
    });

    $(document).on('mouseout', '.vp-portfolio__item-img img', function() {
        var $this = $(this);

        // restore image.
        if ( $this.attr('data-saved-src') ) {
            $this.attr({
                src: $this.attr('data-saved-src'),
                srcset: $this.attr('data-saved-srcset'),
            });
            $this.removeAttr('data-saved-src');
            $this.removeAttr('data-saved-srcset');
        }
    });
});

• This reply was modified 6 years, 3 months ago by Nikita.

It works, thanks. Do you think I could customize the template of visual portfolio to use an ACF field that contains the gif image? Can I just override the portfolio template to add a data attribute to the image tag?

I think yes, you can.