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.
- This represents a caption associated with describing the image with the
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>
and4rem
of padding at the bottom of the container to give it the vintage polaroid look.
- The padding shorthand will apply
- 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]