Folder Preview Ideas

Some ideas for previewing or just playing with folders on hover. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview for what’s inside.

Today we’d like to share some fun little hover effects with you. The idea is to show a preview animation for folders. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered folder. We are using anime.js to power the animations.

Attention: We are using a couple of modern CSS properties so this demo only works in the latest browsers.

Have a look at some of the final states of the hover animations:

FolderPreviewIdeas_01

FolderPreviewIdeas_02

FolderPreviewIdeas_03

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy this tiny set and find it inspiring!

References and Credits

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!

Feedback 15

Comments are closed.
  1. I know you have magic box. Form there you provide us one by one…. 🙂

  2. Seems broke. Browsers are all up to date. If I need canary you should make that clear.

  3. this is nice … is it possible to use this as an option button, example … when i click on the folder, the popups appear , with their own commands…in the demo, everytime i try to click on the popup animations, they dissapear.