Add a Polaroid Photo Effect to Squarespace Instagram Block

Apr 14

Written By Nabil

In today's blog post, I'll be sharing this easy-to-implement code snippet, which will add a charming polaroid border effect to your Instagram block. With just a few lines of CSS, you'll be able to achieve a captivating visual transformation. The code also includes a subtle rotation effect, making the photos appear more like real polaroids.

Navigate to the Custom CSS panel by clicking Website > Website Tools > Custom CSS. Then, paste the following code

/* Add a polaroid border effect Instagram Block */
.sqs-gallery-design-grid-slide .margin-wrapper {
  position: relative;
  padding: 15px; /* Adjust this value to change the border size */
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px; /* Adjust this value to change the corner roundness */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Rotates the images slightly for a more realistic polaroid effect */
.sqs-gallery-design-grid-slide:nth-child(odd) .margin-wrapper {
  transform: rotate(-2deg);
}

.sqs-gallery-design-grid-slide:nth-child(even) .margin-wrapper {
  transform: rotate(2deg);
}

/* Hover Effect */
.sqs-gallery-design-grid-slide img {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.sqs-gallery-design-grid-slide:hover img {
  transform: scale(1.1) rotate(0deg);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

If you enjoyed this tutorial and want to explore more creative Squarespace web design solutions, then check out the code shop below for a variety of unique and customizable code snippets.

VIEW CODE SHOP

Articles