Hover Effects Not Working: How to Fix - Oxilab

If your image hover effects aren’t working or displaying correctly, don’t worry, this is usually quick to fix. This guide covers all the most common causes and their solutions, in order from most to least likely.

1. Check That the Shortcode is Correct

The most common reason effects don’t show is a shortcode error.

Make sure you’re using the correct format: [iheu_ultimate_oxi id="1"]
Check the ID number matches an actual style in your Image Hover Ultimate admin list
Watch for curly/smart quotes, some editors auto-convert straight quotes (") to curly quotes ("). Shortcodes only work with straight quotes.
Make sure there are no extra spaces inside the brackets

2. Clear Your Cache

Caching plugins save old versions of your pages. If you changed a hover effect but don’t see the update, it’s probably cached.

Go to your caching plugin (WP Rocket, W3 Total Cache, LiteSpeed Cache, etc.)
Clear/purge the entire cache
Reload your page (hold Shift + click Refresh to force a hard reload in Chrome)

Also clear any CDN cache if you use Cloudflare, BunnyCDN, or similar.

3. Check for JavaScript Errors

Some hover effects depend on JavaScript. If there’s a JS error on your page, the effect may not initialize.

Open your page in Chrome
Right-click → Inspect → click the Console tab
Reload the page and look for any red error messages
If you see errors related to jQuery or “undefined”, there may be a theme or plugin conflict

4. Theme or Plugin CSS Conflict

Your theme or another plugin might be overriding the plugin’s CSS, making hover effects invisible or broken.

Quick test:

Temporarily switch to a default WordPress theme (Twenty Twenty-Four)
Check if the hover effect works
If it does, your theme is causing the conflict

Fix: Use the Custom Parent Class setting (Image Hover Ultimate → Settings) to add specificity to the plugin’s CSS, making it more resistant to theme overrides.

5. jQuery Conflict

Some themes or plugins load jQuery incorrectly, which can break all jQuery-dependent plugins including Image Hover Effects Ultimate.

Signs: Multiple JavaScript errors in the console mentioning “$ is not defined” or “jQuery is not defined”

Fix:

Deactivate plugins one by one to find the culprit
Make sure no plugin is loading a conflicting version of jQuery
Check that “Move scripts to footer” optimization isn’t causing load-order issues

6. Font Awesome Icons Not Showing

If you’re using Button overlay effects and the icons appear as empty boxes or question marks:

Go to Image Hover Ultimate → Settings and confirm Font Awesome Support is set to Yes
Check for duplicate Font Awesome — if your theme also loads it, conflicts can occur. Try setting Font Awesome Support to No to use your theme’s version instead
Verify the icon class name is correct (e.g., fa fa-heart not fa-heart)

7. Effect Works on Desktop But Not Mobile

Check Mobile or Touch Device Behaviour in Settings — if set to Yes, the first tap shows the effect, second tap follows the link. This is correct behavior.
If the effect doesn’t respond at all on mobile, check for JavaScript errors in mobile browser DevTools
Some older Android browsers have limited CSS3 support — test on a modern Chrome/Safari

8. Effect Displays But Animations Don’t Play

Check that your browser hasn’t set “Reduce Motion” in accessibility settings — this can suppress CSS animations
Some aggressive performance optimization plugins (like Autoptimize with “Aggregate CSS” enabled) can strip or reorder CSS, breaking animations
Try disabling CSS optimization in your performance plugin and check again

9. Scroll Animations Not Triggering

If you’ve set entrance animations that should trigger on scroll but they’re not firing:

Go to Settings and confirm Waypoints Support is set to Yes
Check for JavaScript conflicts in the console
Another plugin may already load Waypoints, causing a conflict — try setting Waypoints Support to No

10. Shortcode Shows as Plain Text

If [iheu_ultimate_oxi id="1"] appears literally on your page instead of rendering:

Make sure the plugin is activated (Plugins → Installed Plugins)
In Gutenberg, ensure you’re using a Shortcode block, not a Paragraph block
In the Classic Editor, paste the shortcode in Text mode, not Visual mode

Still Not Working?

If none of the above fixes your issue:

Deactivate all other plugins and test (to isolate a conflict)
Switch to a default theme temporarily and test
Check the WordPress error log for PHP errors related to the plugin
Contact the plugin support team with a description of the issue, your WordPress version, PHP version, and active theme/plugins