Full Image Reveal Effect

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

Full Image Reveal Effect was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants