Fullscreen Hover Loop Effect

A fullscreen loop effect that shows a fast preview of images when hovering a special menu item.
FullscreenLoop_featured

Today we’d like to share a little artsy effect with you. The idea is to show a fast fullscreen preview of images when hovering over a special link. In our demo we use the concept of a photographer’s website where the link to their works triggers the effect. On hover, some photos are shown rapidly in a loop. Once the link is clicked, the current image scales down and moves to its place in the grid. The animations are made using TweenMax.

The demo is kindly sponsored by HelloSign API: The Most Flexible eSign API.
If you would like to sponsor one of our demos, find out more here.

Attention: Note that we use modern CSS properties that might not be supported in older browsers.

Our landing page of the demo has a menu in the top right corner.

FullscreenLoop_01

The “photography” link will trigger the loop. The loop will only contain the grid items that will be visible in the viewport:

FullscreenLoop_02

Once the “photography” link is actually clicked, we scale down the current image and animate it to its place in the grid:

FullscreenLoop_03

When clicking on the back button or on the page name in the top left corner, we’ll show the landing page content again.

FullscreenLoop

We hope you like this little effect and find it useful!

References and Credits

Previous:
Next:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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

Which newsletter would you like to receive?

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.