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..."><img onmouseover="this.src='';" onmouseout="this.src='';" src="" 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" - -  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.

Thanks for reading, watching and listening, and have a great day!


Paul Hickey, Founder / CEO / Lead Strategist at Data Driven Design, LLC has created and grown businesses via digital strategy and internet marketing for more than 10 years. His sweet spot is using analytics to design and build websites and grow the audience and revenue of businesses via SEO/Blogging, Google Adwords, Bing Ads, Facebook and Instagram Ads, Social Media Content Marketing and Email Marketing. The part that he’s most passionate about is quantifying next marketing actions based on real data.

Leave a Comment

You must be logged in to post a comment.