.container
  .thumb.album-thumb
    .thumb-container
      .images-container
        %img.thumb-image{ src: "https://images.unsplash.com/photo-1505388763672-ee96ba65bac8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=aa2b17198c95694b3f90d9e8681d66bc&auto=format&fit=crop&w=1950&q=80" }
        %img.thumb-image{ src: "https://images.unsplash.com/photo-1505388763672-ee96ba65bac8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=aa2b17198c95694b3f90d9e8681d66bc&auto=format&fit=crop&w=1950&q=80" }
        %img.thumb-image{ src: "https://images.unsplash.com/photo-1505388763672-ee96ba65bac8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=aa2b17198c95694b3f90d9e8681d66bc&auto=format&fit=crop&w=1950&q=80" }
      .photo-count
        .content
          .number 120
          .label PHOTOS
    .title
      Album title goes here


  .thumb.album-thumb
    .thumb-container
      .images-container
        %img.thumb-image{ src: "https://images.unsplash.com/photo-1512189805855-2fab30ba7c51?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=31857ada25ac94bd5ce5d054cc3008d4&auto=format&fit=crop&w=995&q=80" }
        %img.thumb-image{ src: "https://images.unsplash.com/photo-1512189805855-2fab30ba7c51?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=31857ada25ac94bd5ce5d054cc3008d4&auto=format&fit=crop&w=995&q=80" }
        %img.thumb-image{ src: "https://images.unsplash.com/photo-1512189805855-2fab30ba7c51?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=31857ada25ac94bd5ce5d054cc3008d4&auto=format&fit=crop&w=995&q=80" }
      .photo-count
        .content
          .number 90
          .label PHOTOS
    .title
      Album title goes here

@import url(https://fonts.googleapis.com/css?family=Roboto);

* {
  font-family: Roboto;
  font-size: 13px;
}

.container {
  padding: 50px;
  margin: 0 auto;
  text-align: center;
}

.album-thumb {
  display: inline-block;
  border: 1px solid #eaeaea;
  position: relative;

  .thumb-container {
    position: relative;
    padding: 20px;
    cursor: pointer;

    &:hover {
      .photo-count {
        background: rgba(43, 43, 43, 0.9);
      }
      .thumb-image:nth-child(1) {
        transform: rotateZ(0deg);
      }

      .thumb-image:nth-child(2) {
        transform: rotateZ(0deg);
      }
    }
  }

  .photo-count {
    width: 80px;
    height: 80px;
    background: rgba(43, 43, 43, 0.4);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

    .content {
      display: inline-block;
      color: #ffffff;
      text-align: center;
      margin-top: 50%;
      width: 100%;
      transform: translateY(-50%);

      .number {
        font-size: 30px;
      }
    }
  }

  .title {
    color: #4f4f4f;
    margin: 10px;
    text-align: center;
  }
}

.images-container {
  width: 200px;
  height: 200px;
  position: relative;

  .thumb-image {
    max-width: 200px;
    max-height: 200px;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ffffff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s;

    &:nth-child(1) {
      transform: rotateZ(10deg);
    }

    &:nth-child(2) {
      transform: rotateZ(4deg);
    }
  }
}