Hover Preview Effect with Mini Map

Celý článek

I find mini maps really exciting. These tiny UI components can give visual feedback on where we are on a page, e.g. what we are hovering or viewing. Sometimes this helps create a representation of content and ease navigation. But we can also go crazy and try some experimental stuff with it! And that’s exactly what I would like to share with you today.

The main idea is to use a hover effect in order to preview some content. Like a giant tooltip. Since this large preview will cover the whole page (including the thing we are hovering) we use a mini map to guide us. This map shows where we are with the mouse.

The design and animation for this demo is based on the beautiful website of La Culture des Lieux. Have a look at it, it’s a wonderful scroll-based design with lots of creative animations. The epic photography used in this demo are by Frankie Cordoba.

The initial view of our demo is a set of three thumbnails:

When we hover over any of the thumbs, we animate some content in:

We also show a mini map that maps the movements of the pointing device to a small representation of the three thumbnails. This indicates where we are at the moment. As soon as we move the mouse away from the thumbnail, the content pops back in and we see the initial thumbnails view.

Have a look at the entire interaction flow:

There are two demos. The first one hides the cursor on hover. The second one shows a custom cursor with a larger appearance while hovering the thumbnails.

Note that this is a highly experimental concept! Obviously this should be some kind of add-on to a design. For mobile, some other interaction and solution would have to be used.

If you are in love with mini maps like me, you might enjoy the Grid Zoom Layout that contains a tiny grid version when opening the content.

The post Hover Preview Effect with Mini Map appeared first on Codrops.