Free and Pro · Hover effects

Hover effects

All 21 hover effects: Tilt, Grow and Lift come with the free plugin, and AnimateGL Pro adds the WebGL effects for images, with or without an entrance animation, and the CSS reveals for any block. Move your mouse over the tiles. Pick one in the block sidebar or in Elementor, or add its class. They’re off for visitors who prefer reduced motion.

Portrait lit by neon lights — WebGL agl-hover-zoom

Street of neon signs — WebGL agl-hover-bulge

Neon sign — WebGL agl-hover-rgb

No entrance needed: these images are shown as they are and only drawn with WebGL while the mouse is over them.

Alley of red lanterns — WebGL agl-in-none agl-hover-zoom

Portrait lit by neon lights — WebGL agl-in-none agl-hover-bulge

Street of neon signs — WebGL agl-in-none agl-hover-rgb

Flowing effects: they follow how the mouse moves, not just where it is.

Neon sign — WebGL agl-hover-liquid

Alley of red lanterns — WebGL agl-hover-ripple

Portrait lit by neon lights — WebGL agl-hover-drag

Street of neon signs — WebGL agl-hover-pixels

Neon sign — WebGL agl-hover-reveal

Alley of red lanterns — WebGL agl-fade agl-hover-drag

Glitch: bands of the image jump sideways and its colours split while the mouse moves over it.

Neon sign — WebGL agl-hover-glitch

Alley of red lanterns — WebGL agl-fade agl-hover-glitch

Portrait lit by neon lights — WebGL agl-glitch agl-hover-glitch

Reveals: the image changes away from the mouse and shows itself around it.

Street of neon signs — WebGL agl-hover-spotlight

Alley of red lanterns — WebGL agl-hover-focus

Portrait lit by neon lights — WebGL agl-hover-mosaic

Neon sign — WebGL agl-hover-trail

Street of neon signs — WebGL agl-hover-split

Alley of red lanterns — WebGL agl-hover-split with a second image

With a second image, set in the block sidebar or as data-agl-hover-image.

Portrait lit by neon lights — WebGL agl-hover-swap

Alley of red lanterns — WebGL agl-hover-reveal with a second image

Alley of red lanterns — WebGL agl-fade agl-hover-swap

The same reveals in CSS, for any element and without WebGL.

Neon sign — CSS agl-hover-css-reveal

Street of neon signs — CSS agl-hover-css-spotlight

Alley of red lanterns — CSS agl-hover-css-focus

Alley of red lanterns — CSS agl-hover-css-split with a second image

Tilt Free

Turns in 3D toward the mouse.

agl-hover-tilt

Grow Free

Scales up a little.

agl-hover-grow

Lift Free

Rises off the page.

agl-hover-lift

Get AnimateGL Pro

The WebGL hover and scroll effects, stagger, text split, triggers and the Shapes and Fade packs, from $49 a year.

Try the free version