Interactive image effects for Elementor
Emage Hover Effects for Elementor (Pro) is an Elementor add-on for creating image displays that reveal content or visual changes when a visitor moves the cursor over an image. The Pro edition includes more than 150 hover effects, covering basic and advanced styles for images, overlays, and content.
It is intended for WordPress websites that use Elementor, including blogs, news sites, e-commerce websites, and e-learning sites. The effects are designed with CSS3 and can be adjusted through the Elementor interface without requiring coding for the standard customization options.
Choose and combine hover effects
The effect library includes styles for fading, pushing, zooming, blurring, sliding, flipping, shuttering, folding, and rolling. Effects can be applied separately to the image, overlay, and content, allowing you to create different visual relationships between the background image and the information shown on top of it.
The Pro edition also supports virtually unlimited effect combinations. You can use different styles across multiple image widgets, copy a style and paste it onto another image, or duplicate an image. This makes it practical to build consistent image cards while still varying the presentation where needed.
Content, alignment, and styling controls
Hover content can include a title, description, icon, link, and button. The add-on provides nine alignment options, including horizontal and vertical positioning choices. You can place text to the left, center, or right and position it at the top, middle, or bottom of the effect.
Background controls support a background color or a transparent background. You can adjust spacing between elements, set padding around the content, and use border radius to soften the image card’s corners. Circle and square borders are available with the effects.
Typography settings apply to titles and descriptions. You can adjust color, font, font size, weight, case, style, decoration, line height, and letter spacing. Icon controls include icon color, icon size, and the space between the icon and title. These options help align the visual treatment with the rest of an Elementor page.
Links, grids, and responsive layouts
Images can link to a page or website by adding the destination in the widget’s link field. The Pro edition also includes post grid hover effects and dynamic fields when used with Elementor Pro. This supports image-based content layouts that need more than a single static hover treatment.
The hover effects are responsive and are designed to accommodate very small and extra-large devices through flexible CSS. WPML compatibility is listed among the available features, and the add-on can work with themes where Elementor works.
Practical workflow
Add an image effect through Elementor, select a hover style, then configure the image, overlay, and content separately. Add the title, description, icon, link, or button, and refine alignment, spacing, background, borders, and typography. Reuse a finished style by copying and pasting it to another image or duplicating the image widget.
Installation
Use the Pro edition with Elementor. The supplied information states that the plugin only works with the Elementor page builder. When upgrading from the free plugin, remove the free plugin and install the Pro version after purchase.
