Image displays that respond to a hover

Emage Hover Effects for Elementor (Pro) is an add-on for WordPress websites that use Elementor. When a visitor moves the cursor over an picture, the display can reveal content or change its appearance. The Pro edition includes more than 150 basic and advanced effects built with CSS3. Standard options can be adjusted in Elementor without coding.

The effects are intended for websites such as blogs, news sites, online stores and e-learning websites. You can apply styles separately to the image, overlay and content, controlling how the background and foreground information appear together.

Effect styles and combinations

The library covers fading, pushing, zooming, blurring, sliding, flipping, shuttering, folding and rolling effects. The Pro edition works with virtually unlimited combinations across image widgets. Use various treatments on separate pictures, copy and paste a style onto another image, or duplicate an image widget to reuse a design.

Content placement and appearance

A hover display can contain a title, description, icon, link and button. Nine alignment options combine horizontal placement at the left, center or right with vertical placement at the top, middle or bottom.

Set a background color or use a transparent background. Spacing controls adjust the gaps between components and padding around the content. Border radius can soften card corners, and circle and square borders are available with the effects.

Typography controls cover title and description color, font, size, weight, case, style, decoration, line height and letter spacing. For icons, adjust the color and size, along with the space between the icon and title.

Links, post grids and responsive layouts

To link an image to a page or website, enter its destination in the widget’s link field. The Pro edition also includes post grid hover effects and dynamic fields when used with Elementor Pro.

The effects use flexible CSS and are designed to accommodate very small and extra-large devices. WPML compatibility is listed, and the add-on can work with themes that support Elementor.

Using an effect in Elementor

Add an image effect through Elementor and choose a hover style. Configure the image, overlay and content separately, then add any title, description, icon, link or button. Adjust alignment, spacing, background, borders and typography as needed. Copy and paste a finished style onto another image or duplicate the image widget to reuse it.

Elementor requirement and upgrade

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