V4 Extentions Image Hover Estimated reading: 5 minutes 3 views Show a picture that follows the mouse when a visitor hovers over your text or element. A great way to preview products, projects or team members. No code needed. WORKS ON Any V4 element PRESETS 5 hover animations PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO Active license Tip: Install and activate both Animation Addons plugins before you start. The hover image only shows on the live page when Pro is active. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab, then click Interaction. Under Interaction Extensions, turn on Image Hover. Click Save Settings. Image Hover Extension (click to zoom) STEP 2 Add a Hover Image Pick the element the visitor will hover, then choose the picture that appears. Open your page with the Elementor Editor. Select an element, for example a Heading. In the General tab, open the Image Reveal on Hover section. Turn on Enable. Click Select image and choose your picture from the Media Library. Click Update to save your page. Image Reveal on Hover section (click to zoom) The options after you turn on Enable (click to zoom) Tip: Visitors see the picture when they move the mouse over the element. It follows the mouse and fades away when the mouse leaves. STEP 3 Choose a Preset The Animation Preset decides how the picture moves behind the mouse. Open the Animation Preset list. Choose a preset, for example Magnetic Lag. Hover your element on the live page to see it. The Animation Preset list (click to zoom) SETTINGS Options Enable Default: OffTurns the hover image on for this element. You can set it for each device. Hover Image The picture that appears. Choose it from the Media Library. Animation Preset Default: NoneHow the picture follows the mouse. See the list below. Width (px) Default: 300Width of the picture. Height (px) Default: 300Height of the picture. Top (px) Default: -15Moves the picture up or down from the mouse. A negative number moves it up. Left (px) Default: 30Moves the picture left or right from the mouse. A negative number moves it left. Z-Index Default: 1The stacking order. Raise it if the picture shows behind other elements. Enable in Editor Default: OffShows the hover image inside the Elementor editor too, so you can test it while you build. Size, position and Z-Index (click to zoom) Presets None The picture follows the mouse right away. Magnetic Lag The picture follows with a soft delay, like it is being pulled. Spring Bounce The picture bounces a little when it catches up. Tilt 3D The picture follows and leans in 3D as you move. Trail Ghost Soft copies of the picture trail behind the mouse. Elastic Snap The picture snaps into place when you move the mouse fast. RESULT Final Result The same hover on each preset. Each heading has its own picture. The mouse moves across the heading, makes a few quick moves, then leaves. The picture fades away. None (default) None. The picture sticks to the mouse Magnetic Lag Magnetic Lag Spring Bounce Spring Bounce Tilt 3D Tilt 3D Trail Ghost Trail Ghost Elastic Snap Elastic Snap GOOD TO KNOW How It Works Floats above the page The picture is not clipped by the container around your element, so it can spill outside it. Per device Enable, Hover Image and the size and position options can be different on desktop, tablet and mobile. Live page The hover image runs on the live page. Turn on Enable in Editor to test inside the editor. Only loads when used Pages with no hover image do not load any extra script. HELP Troubleshooting I do not see the Image Reveal on Hover section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) > Interaction and turn on Image Hover. Then reload the editor and select a V4 element. No picture appears when I hover Make sure Enable is on and a Hover Image is chosen. Update the page and clear your cache. Test on the live page with the mouse over the element. Pro must be active with a valid license. The picture shows behind other elements Raise the Z-Index. Try 10 or 100. The picture is too big or too far from the mouse Change Width and Height to resize it. Change Top and Left to move it closer to the mouse. Does it work on touch screens? Hover needs a mouse. On a phone or tablet there is no hover, so turn the option off for those devices, or keep it for desktop only. You Did It Your element now reveals a picture that follows the mouse. If you face any problem, please contact our support team. We are happy to help.
