Create a bounce hover effect on Squarespace gallery grid blocks

Are you looking to create a unique bounce or lifting effect for gallery grid blocks in Squarespace? Look no further! Here’s my quick and simple piece of CSS code that will make your gallery blocks stand out!

Add the below code to your custom css. Go to > Design > Custom CSS and paste the code.

TIP: Change the -10px higher or lower to change the transformation height

---

CSS code

//Gallery bounce//

.sqs-gallery-design-grid .margin-wrapper {

  transition: box-shadow .5s, transform .5s;

  background: none;

  color: black;

}

.sqs-gallery-design-grid .margin-wrapper:hover {

  transform: translateY(-10px);

}

.sqs-gallery-block-grid {

  overflow: visible;

}

---

The below code is to target only a specific gallery block rather than all gallery blocks site wide. Change the #yourblockid to your specific block i.d. You can use a great plugin for this: block identifier

---

//Gallery bounce on ‘specific’ gallery grid

#yourblockid {.sqs-gallery-design-grid .margin-wrapper {

  transition: box-shadow .5s, transform .5s;

  background: none;

  color: black;

}

.sqs-gallery-design-grid .margin-wrapper:hover {

  transform: translateY(-10px);

}

.sqs-gallery-block-grid {

  overflow: visible;

}}

---

Did I help you? Consider buying me a coffee as thanks!