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 :

<figure>
- This will be the main container for the picture and caption.
<img>
- Embeds the image inside of the container.
<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:

background-color set to white.
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.
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!

[Photo by Denise Jans on Unsplash]

How to Create a Polaroid Picture with CSS 📸

Comments (3)

More from this blog

Database GUI's to Boost Development Productivity

How to Setup a Global gitignore File

7 Git GUI's to Boost Development Productivity

Git Worktree

5 Speech-to-Text Apps to Boost Productivity

The HTML

The CSS

Final Product

Command Palette

Comments (3)

More from this blog

The HTML

The CSS

Final Product