Mobile & Touch Device Behavior
Image hover effects are triggered by a mouse cursor on desktop — but smartphones and tablets don’t have a mouse. This guide explains exactly how Image Hover Effects Ultimate handles touch devices, and how you can configure the behavior to give your mobile visitors the best possible experience.
The Challenge with Hover Effects on Mobile
On desktop, hover effects trigger when the mouse cursor moves over an image. On a touchscreen, there’s no cursor — only taps. This creates a choice: do you show the hover effect on the first tap, or skip straight to the linked action?
Image Hover Effects Ultimate gives you control over this with a dedicated mobile behavior setting.
The Two Mobile Behavior Options
Option 1: Yes — Two-Tap Behavior (Default & Recommended)
With this setting enabled:
- First tap — Shows the hover effect (overlay, text, buttons appear)
- Second tap — Follows the link or action
This is ideal when your hover effect contains important information that mobile users need to see — like a product name, description, or “View Details” prompt. The two-tap behavior ensures they don’t miss it.
Best for: Portfolio galleries, product galleries, team member cards, and any effect where the overlay content adds meaningful value.
Option 2: No — Single-Tap Behavior
With this setting disabled:
- Single tap — Immediately follows the link
- The hover animation is skipped entirely on touch devices
This is better when the hover effect is decorative and users just need to navigate quickly. It feels more natural and app-like on mobile.
Best for: Navigation image grids, simple gallery links, and effects where the text is already visible without hovering (or not needed on mobile).
How to Change the Setting
- Go to Image Hover Ultimate → Settings in your WordPress admin.
- Find the Mobile or Touch Device Behaviour option.
- Select Yes or No.
- Click Save Changes.
How the Touch.js Library Works
Image Hover Effects Ultimate includes a lightweight touch.js library that handles touch events across different mobile browsers and devices. It:
- Detects whether the device is touch-capable
- Converts touch events into the appropriate hover triggers
- Handles the two-tap behavior without interfering with scroll gestures
This library is only loaded on touch-capable devices, keeping desktop performance unaffected.
Responsive Design Considerations
Beyond touch behavior, there are other important aspects of making your hover effects work well on mobile:
Set Responsive Column Counts
Your desktop layout might use 3 or 4 columns, but on a phone screen, this makes images too small. In the hover effect settings, configure:
- Desktop: 3–4 columns
- Tablet: 2 columns
- Mobile: 1–2 columns
Adjust Font Sizes for Small Screens
Text that’s readable at 18px on desktop can be hard to read on a 320px wide phone. Use the responsive typography settings (Pro) to set smaller font sizes for mobile.
Increase Button/Icon Size for Touch
If you’re using Button overlay effects, make sure icon buttons are large enough to tap accurately. A minimum of 44×44 pixels is recommended for touch targets.
Testing on Real Devices
Always test your hover effects on an actual smartphone — not just by resizing your desktop browser window. Browser DevTools mobile simulation doesn’t fully replicate touch behavior.
Quick ways to test:
- Open your page URL on your phone browser
- Share a staging link with a colleague who has a different device (iOS vs Android)
- Use browser DevTools → Device Mode → select a real device preset and enable touch events
Common Mobile Issues & Fixes
- Tap doesn’t show hover effect — Check that Mobile Behaviour is set to Yes in settings.
- Images too small on mobile — Adjust column count for mobile in the effect’s responsive settings.
- Text overflows on small screens — Shorten your title/description text, or reduce font size in mobile settings.
- Flip box not working on mobile — On touch devices, first tap shows the back of the card, second tap follows the link. This is correct behavior when Mobile Behaviour is set to Yes.