Join the waitlist

Add image hover effects in WordPress

When the pointer is over a picture, it tips back in 3D, lifts with a soft shadow or zooms inside its frame, with an optional glare, color change or caption.

Get Grinner free
See it live

Type

An upgrade to the Image block

Find it

Image settings, Hover

Phones

Touch screens show the picture at rest

Speed

Works on the picture you already have, no extra files

Live demo

Pictures that react to you.

This is the real Image hover effects setting, running on this page.

Image hover effects example, Album cover, a lemon sun setting over orange stripes
Image hover effects example, Album cover, Grinner rising through lilac and orange rings
Image hover effects example, Album cover, a black record surrounded by stars
Side B

Settings    Hover effect Tilt, Lift and Zoom     Glare sheen (hover)     Grayscale → colour (hover)

What you can change

The settings worth knowing.

One motion per picture, plus any of three extras.

Image hover effects example, Album cover, a lemon sun setting over orange stripes

Tilt

Image hover effects example, Album cover, Grinner rising through lilac and orange rings

Lift

Image hover effects example, Album cover, a black record surrounded by stars

Zoom

Hover effect

Tilt, lift or zoom

Tilt tips it back in 3D, Lift raises it 8px with a shadow, Zoom grows it inside its frame.

Image hover effects example, Album cover, a lemon sun setting over orange stripes

Tilt direction

Which edge pushes back

Choose an edge or a corner, or let the tilt follow the mouse.

Image hover effects example, Album cover, a black record surrounded by stars
Late night radio

Overlay + caption (hover)

A caption that slides up

A dark shade rises and the image caption slides up over it.

Hover speed (ms)

How quick it feels

From 150 to 1,000 ms, for every hover effect on that picture.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Select an image

Any Image block on the page.

3

Pick a hover

In its Hover settings, choose Tilt, Lift or Zoom, add an extra if you like, then publish.

Good to know

Fair questions.

They are a Grinner upgrade to the Image block. When the pointer is over a picture it tips back in 3D, lifts with a soft shadow or zooms inside its frame, with an optional glare, color change or caption. Use them to make portfolios, products and galleries feel responsive.

The picture at rest and in full color. A caption sits on its strip all the time, without the shade.

No. Zoom can’t share a picture with in-frame parallax or a sticker motion.

The glare needs a browser feature Firefox doesn’t have yet, so it simply doesn’t appear there.

Yes. Nothing moves and there’s no glare, while the shadow, color change and overlay appear instantly.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

  • Studio-quality design
  • Built for speed
  • Pay once, no subscription

You’re on the list. We’ll email you when GrinBot launches.

Something went wrong. Please try again in a moment.

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All images features

Image entrances and scroll effects

Images that reveal as they appear, or move and drift with the scroll.

Clickable cards

Make a whole card one link, with its buttons still working.

Card Mode

Turn a section, or each block in it, into a card with one switch.

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version