Grid Item Hover Effect

Three hover effects based on a grid design by Alena Orlova.

By in Playground on
Demo Code

The other day I stumbled upon this really beautiful grid design by Alena Orlova:

I love the details of the elements! As they call for being animated I went ahead and tinkered around with some hover effects which I want to share with you today.

I haven’t done any of these kind of hover effects in a while so it was a challenge to try out something fresh!

There are 3 slightly different hover effects, also direction-aware in the second example. The play with subtle skewing and filter effects gives a touch of WebGL magic 😉

Have a look:

I really hope you enjoy these little hover ideas and find them inspiring! Thanks for checking by!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Thumbnail Hover Effect with SVG Filters

Expanding Rounded Menu Animation

Turning 3D Models to Voxel Art with Three.js

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!