W3docs
en
Log in

How to Create Polaroid Image With CSS

Do you want to get '90s vibes with just only CSS? This tutorial is just for you to create a Polaroid image effect for the website. Follow the steps and get examples.

Tags

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 <span class="attribute">title</span> 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 <span class="attribute">alt</span> attribute, which gives information about the image if a user cannot view it.

How to create an html <a> tag with title and alt attributes

<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 <span class="property"> XFI5 </span> tag. The benefit of doing this is that we can use the content property to get the <span class="attribute">title</span> attribute from the <a> tag. Also, specify the color, font-size, <span class="property">position</span>, 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, <span class="property">box-shadow</span>, and <span class="property">z-index</span> properties.

How to use :hover pseudo-class, CSS transform and box-shadow properties for HTML <a> tag?

.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:

An example of how to create polaroid image with CSS

<!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>
Try it Yourself »

Result

<div class="demo mx-2.5 not-prose"> <div class="polaroid"> Santorini </div> </div> ### Example of creating two polaroid images:

An example of how to create beautiful polaroid image with only CSS

<!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>
Try it Yourself »

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

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>
Try it Yourself »