Join the waitlist

Add hover effects to WordPress cards

When the pointer is over a section, or over each card in it, it lifts, grows, glows, gains an outline, shows a sliding sheen or shifts color.

Get Grinner free
See it live

Type

A setting on Group and Columns

Find it

Section settings, Hover effect

Phones

Touch screens show the resting card

Speed

One light effect per section

Live demo

Cards that notice the pointer.

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

30 min

Leek and potato soup

25 min

Cheese scones

50 min

Lemon drizzle

1 hr

Shepherd’s pie

35 min

Pea risotto

45 min

Apple crumble

1 hr

Fish pie

15 min

Welsh rarebit

30 min

Flapjacks

Settings    Hover effect Lift, Border highlight and Gradient sweep     Apply to Each card

What you can change

The settings worth knowing.

Choose the effect, who reacts and how fast.

Lift

Scale

Glow

Border

Sweep

Zoom

Shift

Hover effect

Seven effects

Lift, Scale, Glow, Border highlight, Gradient sweep, Image zoom or Background shift.

A

B

C

Apply to

Section or each card

Container makes the whole section react, Each card lets every direct child react by itself.

150 ms

Quick

500 ms

Soft

Speed (ms)

Quick or soft

From 150 to 500 ms, 250 by default.

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 the section

The Group or Columns holding your cards.

3

Pick an effect

Choose a Hover effect, set Apply to Each card, then publish.

Good to know

Fair questions.

They are a Grinner setting on Group and Columns. When the pointer is over a section, or over each card in it, it can lift, grow, glow, gain an outline, show a sliding sheen or shift color. Use them to make cards and links feel clickable.

The resting card. Hover never runs on touch screens, so never hide information behind it.

No. Image zoom needs one.

Gradient sweep and Image zoom hide a gradient border on mouse devices.

Lift, Scale and Image zoom stay still and the sweep is gone, but color changes still happen.

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 scroll and motion features

Card Mode

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

Parallax

A section, or the things inside it, drifting at its own speed.

Clickable cards

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

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version