How to Use Image Hover Effects with Elementor - Oxilab

Image Hover Effects Ultimate integrates natively with Elementor via a dedicated Elementor Widget, no shortcodes needed. Simply drag the widget onto your canvas, choose a style, and your hover effect gallery appears live in the editor.

Method 1: Native Elementor Widget (Recommended)

Available since v9.11.2, the native Elementor Widget is the easiest way to use Image Hover Effects in Elementor.

Step 1: Create Your Hover Effect Style

If you haven’t already, go to Image Hover Ultimate in your WordPress admin and create a new hover effect style. Note the style ID — you’ll need it in a moment.

Step 2: Open Elementor Editor

Open the page or post where you want to add the hover effect. Click Edit with Elementor.

Step 3: Find the Image Hover Effects Widget

In the Elementor widget panel on the left, search for “Image Hover”.
You’ll see the Image Hover Effects widget under the Image Hover Effects category.
Drag the widget onto your page canvas.

Step 4: Select Your Style

In the widget settings panel on the left, open the Content tab.
Use the Select Style dropdown to choose the hover effect style you want to display. The gallery renders immediately in the Elementor canvas.
An Edit Style button appears below the dropdown — click it to go directly to the Image Hover Effects editor for that style in a new tab.

Step 5: Publish

Once you’re satisfied with the result, click Update or Publish.

The classic Elementor Shortcode widget still works perfectly if you prefer a shortcode-based workflow.

In the Elementor widget panel, search for “Shortcode”.
Drag the Shortcode widget onto your canvas.
Paste your hover effect shortcode — e.g. [iheu_ultimate_oxi id="1"]

Find your shortcode in Image Hover Ultimate → Shortcode List.

Positioning in Elementor Layouts

The Image Hover Effects widget works inside any Elementor container, column, or section:

Full-width section: For a gallery that spans the full page width.
Two-column layout: Pair text content on one side with a hover gallery on the other.
Inside a Tab or Accordion widget: Reveal galleries on demand without cluttering the page.

Using Multiple Styles on One Page

Each Image Hover Effects widget is independent. Add as many as you need on a single page — each showing a different style:

Portfolio section → Style #1
Team section → Style #3
Product gallery → Style #5

Pro Tip: Elementor Motion Effects

Elementor Pro has its own motion effects (parallax, mouse tracking, etc.) — these are separate from Image Hover Effects Ultimate’s hover animations. The two work together on the same page without conflict. Use Elementor for section-level animations and Image Hover Effects Ultimate for per-image hover interactions.

Troubleshooting

Widget not visible in Elementor panel: Make sure Image Hover Effects Ultimate (v9.11.2+) is active. Try refreshing the Elementor editor page.
Gallery not rendering in the editor canvas: Elementor sometimes needs a page reload after adding new widget types. Save and re-open the page.
Styles not loading after update: Go to Elementor → Tools → Regenerate CSS & Data then check again.
Font Awesome icons missing: Elementor loads its own version of Font Awesome. If icons conflict, set Font Awesome Support to No in Image Hover Ultimate settings.