What the hover changes

Emage Hover Effects for Elementor (Pro) is an add-on for WordPress sites that use Elementor. When a visitor moves the cursor over an picture, the display can reveal content or change visually. Its library has more than 150 basic and advanced effects, built with CSS3. Standard customization options are available through Elementor without coding.

You can apply effects separately to the image, overlay and content to control how the background and foreground information appear together. The add-on is intended for websites such as blogs, news sites, e-commerce websites and e-learning sites.

Effect styles and reuse

Choose from fading, pushing, zooming, blurring, sliding, flipping, shuttering, folding and rolling effects. The Pro edition works with virtually unlimited combinations across image widgets, so different pictures can use different treatments. Copy and paste a style onto another image or duplicate an image widget to reuse a design.

Position and appearance controls

Hover content can include a title, description, icon, link and button. Nine alignment options position it horizontally at the left, center or right and vertically at the top, middle or bottom.

Set a background color or use a transparent background. Adjust spacing between components, padding around the content and border radius; circle and square borders are also available with the effects. Typography controls cover title and description color, font, size, weight, case, style, decoration, line height and letter spacing. Icon settings include color, size and spacing between the icon and title.

Links, post grids and responsive layouts

Add a page or website destination in the widget’s link field. The Pro edition includes post grid hover effects and supports dynamic fields when used with Elementor Pro. Its flexible CSS is designed to accommodate very small and extra-large devices. WPML compatibility is listed among its features, and the add-on can work with themes that support Elementor.

Setup and Elementor requirement

In Elementor, add an image effect, select a hover style, then configure the image, overlay and content separately. Add the title, description, icon, link or button, then adjust alignment, spacing, background, borders and typography. Reuse a finished style by copying and pasting it onto another image or duplicating the image widget.

The add-on only works with the Elementor page builder. When upgrading from the free extension, remove the free plugin and install the Pro version after purchase.