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!

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.

Image Layer Animations with Clip-Path

On-Scroll Column & Row Animations

Crafting Scroll Based Animations in Three.js

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

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!