Levitating Hover For Grid Summary Blocks

Install Steps

Levitating Hover For Grid Summary Blocks

Submitted by Thirty Eight Visuals Works with all template families

ezgif-3-6930616b72a6.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Hover Grid Summary Blocks //

.sqs-gallery-design-autogrid .summary-item {
  transition: box-shadow .5s, transform .5s; //change the seconds (one or both values) to make the animation faster or slower
}

.sqs-gallery-design-autogrid .summary-item:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1); //you can alter the px values and rgba color to change the shadow style on hover
  transform: translateY(-10px); //you can change the px value to make the slide go higher up (negative number) or further down (positive number) on hover
}

Step Three

Change transition, box shadow, and transform values to your liking.

Save and refresh the page. 👍

Moov Labs