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.
FolderPreviewIdeas_Featured

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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

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

References and Credits

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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.