Levitating Hover For Grid Summary Blocks

Install Steps

Levitating Hover For Grid Summary Blocks

Submitted by Thirty Eight Visuals Works with all template families


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