Menu
So I have a piece of CSS like this:
.three-image-widget div.hover-icon img.original { display: block; }
.three-image-widget div.hover-icon img.hovered { display: none; }
.three-image-widget div.hover-icon:hover img.original { display: none; }
.three-image-widget div.hover-icon:hover img.hovered { display: block; }
I have .original images as .pngs and the .hovered images are animated .gifs that I want to start, when hovering over the div.hover-icon elements. I know it's possible to do this with a JavaScript hack like this:
$('div.hover-icon').hover(function(){
$(this).find('.original').hide();
var hov = $(this).find('.hovered'),
copy = hov.attr('src');
hov.attr('src','').attr('src',copy);
});
but can I do the equivalent with pure CSS?
902
To reset a GIF animation with JavaScript, we can add a random query string to the end of the image URL. to add an animate GIF img element. to select the img element with querySelector .
Freezeframe. js is a library that pauses animated . gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually. With this JS library, you'll know how to pause a GIF by writing its data to a canvas element — automatically.
You can use <img> tag to insert the GIF on your website. For example: <img src="animation. gif" alt="funny animation GIF">
No you can't. You need to reload the GIF and CSS cannot do this.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
