How to Create Polaroid Image With CSS

Polaroid images bring '90s vibes. They remind us of how the traditional picture looks like and takes us to our old days. The images are placed on a white background with a caption underneath them. There are lots of polaroid effect editors but do you know how to create the effect with pure CSS just on your website?

Let’s see how to create a polaroid image effect with CSS.

Create HTML

  • Create <a> tag to display the image.
  • The link will need a title attribute that we will use as a text for the image caption and, also we need to set the name for the image with an alt attribute, which gives information about the image if a user cannot view it.
<a href="#" title="Santorini">
  <img height="250" src="https://images.unsplash.com/photo-1533105079780-92b9be482077?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Santorini" title="Santorini" />
</a>

Add CSS

  • Style the <a> element by setting the display to "inline-block" and specifying the background, margin, padding, text-decoration, and z-index properties. Center the text with the text-align property. Add the box-shadow and transition properties (use vendor prefixes with them). Set the position to "relative".
  • Use the :after pseudo-element to create a new element after the <a> tag. The benefit of doing this is that we can use the content property to get the title attribute from the <a> tag. Also, specify the color, font-size, position, and top properties.
  • Set the display of the <img> to "block" and specify the width.
  • Use the :hover pseudo-class to create a picked up motion. Define the transform, box-shadow, and z-index properties.
.polaroid a {
  background: #ffffff;
  display: inline-block;
  margin: 55px 75px 30px;
  padding: 15px 15px 30px;
  text-align: center;
  text-decoration: none;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
  -webkit-transition: all .20s linear;
  -moz-transition: all .20s linear;
  transition: all .20s linear;
  z-index: 0;
  position: relative;
}

.polaroid a:after {
  color: #333;
  font-size: 25px;
  content: attr(title);
  position: relative;
  top: 15px;
}

.polaroid img {
  display: block;
  width: 250px;
}

.polaroid a:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
  z-index: 10;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
}

Let’s see the final result.

Example of creating a polaroid image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .polaroid a {
        background: #ffffff;
        display: inline-block;
        margin: 55px 75px 30px;
        padding: 15px 15px 30px;
        text-align: center;
        text-decoration: none;
        -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        -webkit-transition: all .20s linear;
        -moz-transition: all .20s linear;
        transition: all .20s linear;
        z-index: 0;
        position: relative;
      }
      .polaroid a:after {
        color: #333;
        font-size: 25px;
        content: attr(title);
        position: relative;
        top: 15px;
      }
      .polaroid img {
        display: block;
        width: 250px;
      }
      .polaroid a:hover {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2);
        z-index: 10;
        -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
        -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
      }
    </style>
  </head>
  <body>
    <div class="polaroid">
      <a href="#" title="Santorini">
        <img height="250" src="https://images.unsplash.com/photo-1533105079780-92b9be482077?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Santorini" title="Santorini" />
      </a>
    </div>
  </body>
</html>

Result

Santorini

Example of creating two polaroid images:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .wrapper {
        width: 80%;
        text-align: center;
      }
      .polaroid {
        background: #fff;
        padding: 1rem;
        -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
      }
      .polaroid > img {
        max-width: 100%;
        height: auto;
      }
      .caption {
        font-size: 1.8rem;
        text-align: center;
        line-height: 2em;
      }
      .item .polaroid:before {
        content: '';
        position: absolute;
        z-index: -1;
        transition: all 0.40s;
      }
      .item:nth-of-type(2n+1) {
        transform: scale(0.8, 0.8) rotate(5deg);
        transition: all 0.35s;
      }
      .item:nth-of-type(2n+1) .polaroid:before {
        transform: rotate(6deg);
        height: 20%;
        width: 47%;
        bottom: 30px;
        right: 12px;
        box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
      }
      .item:nth-of-type(2n+2) {
        transform: scale(0.8, 0.8) rotate(-5deg);
        transition: all 0.35s;
      }
      .item:nth-of-type(2n+2) .polaroid:before {
        transform: rotate(-6deg);
        height: 20%;
        width: 47%;
        bottom: 30px;
        left: 12px;
        box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
      }
      .item:hover {
        filter: none;
        transform: scale(1, 1) rotate(0deg);
        transition: all 0.40s;
      }
      .item:hover .polaroid:before {
        content: '';
        position: absolute;
        z-index: -1;
        transform: rotate(0deg);
        height: 60%;
        width: 60%;
        bottom: 0%;
        right: 10%;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
        transition: all 0.35s;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="item">
        <div class="polaroid">
          <img src="https://images.unsplash.com/photo-1471623432079-b009d30b6729?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
          <div class="caption">France</div>
        </div>
      </div>
      <div class="item">
        <div class="polaroid">
          <img src="https://images.unsplash.com/photo-1495562569060-2eec283d3391?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
          <div class="caption">Spain</div>
        </div>
      </div>
    </div>
  </body>
</html>

Example of creating a polaroid image with the HTML <figure> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      figure {
        background: #ffffff;
        display: inline-block;
        margin: 55px 75px 30px;
        padding: 15px 15px 30px;
        text-align: center;
        text-decoration: none;
        -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        -webkit-transition: all .20s linear;
        -moz-transition: all .20s linear;
        transition: all .20s linear;
        cursor: pointer;
        position: relative;
      }
      figcaption {
        color: #333;
        font-size: 25px;
        position: relative;
        top: 15px;
      }
      figure img {
        display: block;
        width: 250px;
      }
      figure:hover {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
        -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
      }
    </style>
  </head>
  <body>
    <figure>
      <a href="#" title="Santorini">
        <img height="250" src="https://images.unsplash.com/photo-1533105079780-92b9be482077?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Santorini" title="Santorini" />
      </a>
      <figcaption>Santorini</figcaption>
    </figure>
  </body>
</html>