Interactive Polaroid Photo Gallery With jQuery And SCSS

An interactive, Polaroid-style photo gallery that enlarges/highlights the image on hover over and blurs the rest.

Built with JavaScript (jQuery) and CSS (SCSS).

How to use it:

1. Add images to the gallery.

<div id="gallery" >
  <div class="fifth shadow-sm">
    <img src="5.jpg" alt="Image 1" />
  </div>
  <div class="fifth shadow-sm">
    <img src="4.jpg" alt="Image 2" />
  </div>
  <div class="fifth shadow-sm">
    <img src="3.jpg" alt="Image 3" />
  </div>
  <div class="fifth shadow-sm">
    <img src="2.jpg" alt="Image 2" />
  </div>
  <div class="fifth shadow-sm">
    <img src="1.jpg" alt="Image 1" />
  </div>
</div>

2. The necessary CSS styles for the gallery and its images.

.gallery img {
  width: 100%;
}

.first, .second, .third, .fourth, .fifth {
  width: 40%;
  border: 5px solid white;
  position: inherit;
  height: 20rem;
}

@media only screen and (max-width: 540px) {
  .first, .second, .third, .fourth, .fifth {
    height: 10rem;
  }
}

.first img, .second img, .third img, .fourth img, .fifth img {
  height: -webkit-fill-available;
}

.first {
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
  top: -75%;
}

@media only screen and (max-width: 600px) {
  .first {
    margin-left: 3%;
  }
}

.second {
  width: 35%;
  top: -40%;
  left: 20%;
  -webkit-transform: rotate(356deg);
          transform: rotate(356deg);
}

@media only screen and (max-width: 540px) {
  .second {
    top: -25%;
    left: 20%;
  }
}

.third {
  width: 35%;
  top: -28%;
  left: 30%;
  -webkit-transform: rotate(345deg);
          transform: rotate(345deg);
}

@media only screen and (max-width: 540px) {
  .third {
    top: 20%;
    left: 10%;
  }
}

.fourth {
  top: 10%;
  left: 48%;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

@media only screen and (max-width: 540px) {
  .fourth {
    top: 10%;
  }
}

.fifth {
  margin-top: 0%;
  float: right;
  -webkit-transform: rotate(345deg);
          transform: rotate(345deg);
  margin-right: 15px;
}

@media only screen and (max-width: 540px) {
  .fifth {
    margin-top: 110%;
  }
}

.noRotation {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.shadow-sm {
  -webkit-box-shadow: 0px 0px 7px #a7a7a7 !important;
          box-shadow: 0px 0px 7px #a7a7a7 !important;
}

3. Include the latest jQuery library at the bottom of the webpage.

<script src="/path/to/cdn/jquery.min.js"></script>

4. Activate the Polaroid Photo Gallery by inserting the following JavaScript snippets into your webpage. That's it.

var indexPosition = 0;
$("#gallery div").hover(function () { // Mouse over
  indexPosition++;
  $(this).css({
      "z-index": indexPosition,
      "width": "50%",
      "height": "25rem",
  });
  $(this).addClass("noRotation");
  $(this).siblings().css("filter", "blur(3px)");
}, function () { // Mouse out
  $(this).css({
      "width": "40%",
      "height": "20rem",
  });
  $(this).siblings().css("filter", "grayscale(0%)");
  $(this).removeClass("noRotation");
});

---

This awesome jQuery plugin is developed by tizianavinciguerra. For more Advanced Usages, please check the demo page or visit the official website.