Full Image Reveal Effect

A simple fullscreen image reveal effect where thumbnails slide out of the viewport to reveal a larger image.

Today we’d like to share a simple fullscreen image reveal effect with you. The idea is to have an inital thumbnails layout at the bottom of the page and then animate the items when we click them. A covering element comes sliding in and when it moves out, the fullscreen image view is shown behind. We are using TweenMax for the animations.

The initial inspiration for this effect comes from Zhenya Rynzhuk’s Dribbble shot Harley Weir Personal Promo Website Scroll Animation.

Attention: In this experiment we use some modern CSS properties, so please view in a capable browser.

The initial thumbnail layout view looks as follows:

FullImageReveal_01

When we click on an item, we move the thumbnails up and reveal the fullscreen image:

FullImageReveal_02

We hope you enjoy this little experiment and find it useful!

References and Credits

Tagged with:

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 up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 5

Comments are closed.
  1. Great effect. My homework for the day. If it works on weebly it is usable straight out of box for me.

  2. Really wish you would do simpler demos ( not the code , but fewer elements, no full page are really needed to get the point ) . it’s a pain to read the code after , let me be clear, they are great, but not enough comment is keeping me from having the pleasure I could have on this site.

  3. If I had a dollar for every time your projects and experiments gave me inspiration then I’d be a multibillionaire. Unfortunately I have a lot of hours spent trying to be even half as creative as you are. Wow! The effect is amazing.

  4. Love this effect, but it’s a shame that the Back option has to be done in the GUI and not with the browser back-button — could be some usability problems.