in Playground

B&W Box Gallery

In today’s experiment, we created a little gallery that plays with the black and white versions of images. The idea is to have an initial grid-like view of the different categories or albums. In the background we can see the black an white version of the current image of the hovered album. […]

From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today.

View demoDownload source

In today’s experiment, we created a little gallery that plays with the black and white versions of images. The idea is to have an initial grid-like view of the different categories or albums. In the background we can see the black an white version of the current image of the hovered album.

The hovered item will have a color animation. This we create using John Resig’s Color Animations plugin which you can find here: jQuery Color Animations Plugin

When we click on the album or list item, the colored version of the image fades in, and we are in the “gallery mode” where we can navigate through the images.

When we go back now, the current image that we are viewing will fade to its black and white version and the grid with the album items will become visible again.

We hope you like this little gallery experiment!

View demoDownload source

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

DiagonalSlideshow

Diagonal Slideshow

SVGFilterHover_featured

Image Distortion Effects with SVG Filters

TextTrailEffect_featured

Text Trail Effect

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.

Feedback 44

Comments are closed.
  2. 2

    Im trying to get the boxgallery to work online, but will not work. It only shows the box, but the link is not working to open the box…

    🙂

    Please help me

  3. 3

    Is there a way that I can avoid from having to crop the images when uploaded?

    Thank you 🙂

Comments are closed.