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

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

By: Paul Hickey, Founder and Lead Strategist

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.

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

KEEP MARKETING!

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.

RELATED ARTICLES:

How Can We Help You?

We’d LOVE To Help You With Any Digital Strategy or Web Design Needs

  • Date Format: MM slash DD slash YYYY

FOLLOW PAUL ON THE GRAM

For Data Driven Daily Tips and Motivation

Recent Posts

Latest Podcast Episodes

Categories

Tags

Archives

Paul Hickey Podcast – Latest Episodes

  • WE ARE YOUR DIGITAL TEAM

    Supporting Small Businesses & Mid-Size Company Marketers

    LET’S TALK

(OUR BLOG)

THE PROOF IS IN THE DATA.

EMAIL NEWSLETTER

Get Weekly Recaps of our Data Driven Daily Tip Delivered To Your Inbox Every Friday!

(all photos on this website are of either Data Driven Design employees, clients or friends of Data Driven Design … that’s why everyone is smiling or laughing).

LISTEN TO THE PODCAST

Apple Podcasts | Google Podcasts | Spotify

-NASHVILLE VOICE CONFERENCE-
-DATA DRIVEN ACADEMY-
-THE VOICE SERIES (COMING SOON)-