How to Create a Polaroid Picture with CSS 📸

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Whenever I think of the words "polaroid picture," I can't help but think of OutKast's "Hey Ya" ğŸŽµ. However, along with reminding me of a catchy song, I also like the nostalgic and retro look that polaroid pictures provide. In this post, I'll show you how to produce this effect using CSS.

The HTML

In order to achieve this effect, we need these three semantic elements :

  1. <figure>
    • This will be the main container for the picture and caption.
  2. <img>
    • Embeds the image inside of the container.
  3. <figcaption> (optional)
    • This represents a caption associated with describing the image with the <figure> element. This is optional because you can omit this if you don't want the picture to have a caption displayed underneath the image.

Pairing the three elements together, you will have something that looks like this:

<figure class="polaroid">
     <img
        src="images/grace-maher-lH3GNpsRsnU-unsplash.jpg"
        alt="Polaroid Picture"
     />
     <figcaption>Polaroids are Cool ğŸ˜Ž</figcaption>
 </figure>

The CSS

The first thing we want to do is create a .polaroid class and add it to the <figure> tag. This class will have three CSS properties:

  1. background-color set to white.
  2. padding: 1rem 1rem 4rem
    • The padding shorthand will apply 1rem to the top, left, and right of the <figcaption> and 4rem of padding at the bottom of the container to give it the vintage polaroid look.
  3. An optional box-shadow to add some depth to the overall container.

Then we set a fixed width on the <img> tag. Lastly, apply a text color and center the legend within the <figcaption>.

.polaroid {
  background-color: #fff;
  padding: 1rem 1rem 4rem;
  box-shadow: 5px 7px 4px #888888;
}

img {
  width: 19rem;
}

figcaption {
  color: #000;
  text-align: center;
}

Final Product

Voila! ✨ After combining the HTML and CSS you can get a funky and retro result that looks like the CodeSandbox below:

👋🏽 As always, thank you for reading and happy coding!

[Photo by Denise Jans on Unsplash]

Chris Bongers's photo

This is very cool! And semantic HTML, pretty awesome actually!

Diana Chin's photo

This is cool :)

Alyssa Holland's photo

Thanks Diana! Glad you found it interesting 😁

Peter Thaleikis's photo

Nice, the polaroids are back!