Build a Enchanted Polaroid Memory Wall (Source Code)

Nostalgia is an incredibly powerful web design tool. A polaroid wall where images start blank and slowly “develop” (fade in) upon double interaction brings physical tangibility to the web.

The Develop Animation

Just like a real instax film, we start with a blank white box. Upon double clicking, the image’s opacity slowly transitions to 1.

.polaroid {
  background: white;
  padding: 15px 15px 50px 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}

.polaroid img {
  opacity: 0;
  transition: opacity 8s linear; /* Ssssllloooow fade */
}

.polaroid.developed img {
  opacity: 1;
}

Handwritten Captions

We can use standard fonts like Indie Flower to mimic handwritten scrawls that appear after the image develops. Check out the beautiful drag-and-drop mechanics in the Live Demo!