Grid Item Hover Effect

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

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.

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!