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 […]

By in Playground on
Demo Download

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!

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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.

Ideas for CSS Button Hover Animations

Creating Audio-Reactive Visuals with Dynamic Particles in Three.js

On-Scroll SVG Filter Effect

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 44

Comments are closed.

  6. Wow! Great work 🙂
    I think there is a problem with the download link, please check it.
    Thanks very much.

  13. thanks a lot for this source…it’s amazing as always.. when i am reading my rss feeds .i cannot wait to see codrops tutorials…every time something new…thanks again

  20. A really nice work! Thanks a lot for sharing this work and files-

    and please keep on publishing articles like this one!

  21. Nice tutorial with great effect.

    Thank you for sharing this great work.

  24. I would actually like to see how well this works as a menu. How can I change the script to allow the links (ie: “Accessories” “Dresses”) to link to webpages rather then have them trigger the image gallery?

  29. This is very beautiful Mary! Really great job. Awesome design and amazing functionality 🙂 I would like to use it in a project. Couldn’t find any information regarding its license, though. Is it free to use in commercial projects?

    • Hi pb, thank you! And yes, it is totally free, go ahead and use it 🙂 Cheers, ML (if you use any of the images, please link back to them, they come with an attribution license)

  30. you guys are amazing! thx for this great tutorial!

    just have 3 questions:
    1. is it possible to use html content instead of img?
    2. is it possible to have more then one level of the menu before the content shows up? like childs of dresses –> again menu –> img/html/content
    3. if it is free can i contact you for customization (.1 and .2)? (payed of course)

  35. Hi, perfect for my use!

    On the other hand, someone knows a trick to make it works in iPhone/iPad screen device…. ?

    Thanks for help

  36. Hi, Nice work mary.
    how can we include thumbnails of picture group like accessories, dresses etc inside of gallery. Plz. answer.
    Thanks in advance.

  37. Nice Work Mary Lou, just one question:

    How do I rename “B&W Box Gallery with JQUERY” to my desired name?
    BTW: “B&W Box Gallery with JQUERY” is the heading in the far left side of the page.

    Thanks! Always loved your WorK!!!!

  38. Hi ML I love your input the the designers world!

    Hi sroomy; it is the backgound image of h1 in style.css

  39. Thanks Dirk!
    Another question: How do i make the links work? Like Im dividing the sections into headings and then when you click a section like dresses, you see subheadings. Then when you click the subheadings, you see the pictures… If you dont understand please tell me where i can contact you.

  40. I tried to download the BoxGallery
    and upload all the images and scripts into the server. However, the animation can play on my pc but not on the browser. Can anyone help.

  42. 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

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

    Thank you 🙂