Episode 184: How To Display Animated GIFs as Hover States in WordPress Enfold Theme - Data Driven Daily Tip 294

WordPress Designers and Developers are capable of making almost anything happen from a User Experience Design perspective, but sometimes fancy things cost extra money and time. Fancy things, for example, like having an animated GIF be an alternate rollover image or "hover state" for a regular image. So when you hover your cursor over it, and alternate image shows of it moving.

But I've found a way to implement this within my favorite WordPress theme, Enfold. Using the Code Block element in Enfold, paste this code in...

https://datadriven.design/product/skin-test-1/"><img onmouseover="this.src='https://datadriven.design/wp-content/uploads/2019/04/balm_dotcom_cherry_hover.gif';" onmouseout="this.src='https://datadriven.design/wp-content/uploads/2019/04/Screen-Shot-2019-04-16-at-7.38.18-AM.png';" src="https://datadriven.design/wp-content/uploads/2019/04/Screen-Shot-2019-04-16-at-7.38.18-AM.png" alt="what-ever-you-like"  />

Then replace the URLs of your images in the media gallery like I show in the video on this page.

Now, the reason I set out to do this was for a WooCommerce product grid that a client wanted to try to achieve. There is a plug-in called "Product Flipper" - https://www.youtube.com/watch?v=BhhzbaK_Fvg -  but that wouldn't work for me, because I needed the GIF to animate. Product Flipper is great for a regular hover state, but not for an animated hover state like my solution.

So in Enfold, simply create your own product grid like I do in this video using the different elements including "Code Block" to display your products. This way, you can also control what gets shown on mobile.