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 Manoela Ilic in Playground on January 12, 2011

Demo Download

Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now →

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 get website inspiration? Check out our Webzibition and see whats trending.

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

slideshow

Browse amazing websites

💎✨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.

Get full, free access to 34 video lessons, step-by-step projects, and hands-on demos. Enroll for free →

Feedback ⁴⁴

Comments are closed.

calvez January 12, 2011 at 20:35

nice! amazing work again.
Philip January 12, 2011 at 21:02

Nice work Mary Lou,

as always the best jquery tuts over the net!!!
Mauricio January 12, 2011 at 21:56

Nice work =] i love it
Ralph January 12, 2011 at 22:32

And… she did it again 🙂

Awesome gallery, Mary Lou!!!
Jireck January 12, 2011 at 22:43

nice :=!
Abdelhadi Touil January 12, 2011 at 22:53

Wow! Great work 🙂
I think there is a problem with the download link, please check it.
Thanks very much.
Alex January 12, 2011 at 22:55

Nice! Is there a way to continue scrolling through all 9 images?
SueJ January 12, 2011 at 23:36

Just loved this – thank you for sharing this amazing gallery.
simplex January 13, 2011 at 01:33

you rock ! thank for sharing this
namik January 13, 2011 at 08:56

Really beatifull, excellent work.
Thnx for sharing
Mikkel January 13, 2011 at 12:56

Very cool, nice effects!
OZZY January 13, 2011 at 14:01

Very nice!
Can you prevent the downloading of images?
Agon January 13, 2011 at 14:04

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
DESIGNfromWITHIN January 13, 2011 at 15:11

Fantastic! I’m using it for a site:
Thank you so mutch great idea.

http://nieuwewebsiteontwerpen.nl/portfolio/
ilker January 13, 2011 at 15:21

Thanks, very good job!
Webdroid January 13, 2011 at 15:25

Beautiful. Acts up a bit in ie9 beta …
Raju January 13, 2011 at 21:25

Cool. Creative…Thanks
lazaac January 14, 2011 at 01:52

The result was outstanding.. the effect also interesting.. got to use it..
Bahad?r January 15, 2011 at 13:08

amazing work, i like your works.
LastActionSEO January 15, 2011 at 14:20

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

and please keep on publishing articles like this one!
Web Development Company India January 16, 2011 at 10:34

Nice tutorial with great effect.

Thank you for sharing this great work.
Wayne January 18, 2011 at 15:53

Wow!Great job! where can I send the freshly grounded peppercorns! ; )
harun January 19, 2011 at 10:45

very nice
Vince January 21, 2011 at 18:39

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?
datlone January 23, 2011 at 06:54

Great job. RESPECTss !!!
david January 24, 2011 at 16:58

Another 5* job from Mary Lou
likadevonen January 28, 2011 at 14:49

Great work !
e11world February 1, 2011 at 20:02

Very beautiful Mary! This is really well done!
pb February 4, 2011 at 12:54

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?
- Mary Lou February 4, 2011 at 16:15
  
  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)
4F2E4A2E February 12, 2011 at 01:34

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)
gemmian February 14, 2011 at 15:01

thanks a lot for sharing!!!
edi m yamin March 1, 2011 at 08:15

good job.. i like it
mgl March 10, 2011 at 03:38

nice i use it 🙂
Yashin April 13, 2011 at 10:49

Just Great!!!!!
Micdesign April 21, 2011 at 08:06

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
Sudh May 26, 2011 at 12:59

Hi, Nice work mary.
how can we include thumbnails of picture group like accessories, dresses etc inside of gallery. Plz. answer.
Thanks in advance.
Sroomy May 28, 2011 at 13:00

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!!!!
Dirk May 31, 2011 at 14:09

Hi ML I love your input the the designers world!

Hi sroomy; it is the backgound image of h1 in style.css
Sroomy June 2, 2011 at 15:57

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.
Yvonne July 14, 2011 at 11:11

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.
Web Tasar?m November 23, 2011 at 18:58

Amazing work ! Thank u Marry 😉
henrik dahlfelt January 10, 2012 at 10:39

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
Deyson January 19, 2012 at 17:43

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

Thank you 🙂

Manoela Ilic

Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders

Make Way Grid Effect

On-Scroll Column & Row Animations

Browse amazing websites

Feedback 44

Feedback ⁴⁴