Grid Item Hover Effect

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

By Manoela Ilic 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.

grid hover

Tropical Particles Rain Animation with Three.js

Circular SVG Text Animation

On-Scroll SVG Filter Effect

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.