GSAP Extensions Image Hover Effect Extensions Estimated reading: 4 minutes 32 views Want to add some magic when users hover? Impress your visitors with cool image effects that respond to their mouse movements. The Image Hover Effect brings life and interaction to your content, making your website more exciting and visually appealing. Don’t miss the chance to make your site more interactive—just follow these simple steps to make it more engaging. Requirement Elementor (Page Builder) Animations Addons for Elementor (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Image Hover Effect Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension tab. Under Effects, toggle on Image Hover Effect. Step 1: Choose Your Target Element & Enable the Wrapper Select the element you want to apply the image hover effect to, then click on the container to enable the wrapper. Next, click on ‘Image Hover Effect’ and toggle the ‘Enable’ switch to ‘Yes’. Enable & Enable On Editor The first thing you’ll see is the ‘Enable’ option. To preview your animation inside the editor, you need to turn this on using the “Enable On Editor” setting. If you switch it to “Yes”, the animation will play right in the editor, just like it would on your actual website. But if you leave it “Off”, the element won’t animate in the editor—it’ll just stay still. Don’t worry, though, the animation will still work perfectly on your live site. In short, this setting lets you see how your animation looks while you’re working on your page. Step 2: Add & Resize Your Hover Image Follow the process below to add your image and adjust the width and height settings. Choose Image First things first, choose any image you’d like to appear when hovering over a specific element on your website. For example, I selected a random image that portrays the word ‘Open.’ But you can choose anything you like. Width To display the image accurately on hover, set its width to 300px. You can experiment with different values, but keep in mind that 300px is generally an ideal width for showing an image when hovering over a specific element on your website. Heights To make sure your image looks good when someone hovers over it, try setting the height to 200px. You can adjust it based on your layout, but 200px tends to work well and keeps the image looking clean and balanced. Position Top “Position Top” controls how far from the top the hover content or overlay appears within the image. For example, setting it to 30px will place the content 30 pixels down from the top. However, you can adjust this value to position the content exactly where you want it. You’ll also see options for desktop, tablet portrait, and mobile portrait, which let you adjust the position separately for each device to make sure it looks great everywhere. Step 3: Adjust Position and Layering Place your content exactly where you want and decide what appears in front or behind—on any device. Position Left “Position Left” lets you control how far the hover content or overlay appears from the left side of the image — for example, setting it to 30px will move the content 30 pixels away from the left side. However, you can adjust the value to whatever works best for your design. You can also adjust this separately for desktop, tablet, and mobile to make sure it looks right on all devices. Z-index Z-index lets you choose what shows on top when things overlap on your page. A higher number brings something to the front, and a lower number keeps it behind. If your hover content isn’t showing, it might be hidden under something—just raise the Z-index to bring it forward. You can set the number higher or lower depending on what you need. Final Result You Did It Your website now has a stylish Image Hover effect! When someone moves their mouse over an image, it gently changes with a cool animation. This makes your site feel more lively and enjoyable to use. It’s an easy way to make your site more interesting and keep visitors exploring. If you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
