# How to Create a Polaroid Picture with CSS 📸

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](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantic_elements) :
1.  [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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:

%[https://codesandbox.io/s/polaroid-picture-vgp53]


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


*[<span>Photo by <a href="https://unsplash.com/@dmjdenise?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Denise Jans</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>]*