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

Source Code: (back to article)

<!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>