This feature is in AnimateGL Pro. See AnimateGL Pro.
A hover effect runs while the mouse is over an element, after its entrance has played.
Add a hover effect
In the block editor, open the Scroll and hover effects group in the AnimateGL panel and pick a Hover effect. In Elementor, use Hover effect in the AnimateGL section. You don’t need an entrance animation.
Effects for any block
- Tilt: tilts in 3D toward the mouse.
- Grow: grows a little.
- Lift: rises.
- Colour under the mouse, Spotlight, Sharp under the mouse and Before and after: the block stays grey, dark or blurred, and the mouse shows it as it is.
WebGL effects for images
Zoom in, Bulge, RGB shift, Liquid, Ripple, Drag, Pixel smear, Colour under the mouse, Spotlight, Sharp under the mouse, Mosaic reveal, Colour trail, Before and after, and Image swap.
They work on Image and Featured Image blocks, and on a gallery with a stagger. The image must have no animation, or a WebGL animation set on the block (not the site default).
Hover image
Image swap and the reveal effects can show a second image. Pick it in Hover image. Image swap replaces the image while the mouse is over it. Without a second image, it zooms in. The reveals show the second image around the mouse.
Touch screens
Phones and tablets have no mouse. By default, each block plays its hover effect once when it scrolls into view. Turn this off with Play once on scrolling into view in the Settings tab of the AnimateGL page.
To preview hover effects on a phone, turn on Follow a finger on touch screens in the same tab. A finger on a block then counts as the mouse. Swiping up or down still scrolls. It’s best left off on a live site.
Reduced motion
Hover effects are off for visitors who prefer reduced motion.
Classes
The class is agl-hover-<effect>, for example agl-hover-tilt, agl-hover-css-reveal or agl-hover-zoom. A WebGL effect on an image without an animation also needs agl agl-in-none.
Example
Move the mouse over this paragraph to tilt it.