Add a gentle hover bounce to your Summary Blocks

A touch of motion can quietly transform how a website feels. This CSS adds a soft, buoyant hover effect to Summary Block items — creating a sense of depth and refinement without overdoing it. It’s a small interaction that helps the design feel more tactile and intentional, bringing a bit of life to static content with just a few lines of code.

---

Step 1: Add code to page header injection

1. Navigate to Design > Custom CSS.

2. Paste the following CSS code into the Custom CSS editor:

3. Save your changes.

/* Subtle floaty hover effect for Summary Block items */
.sqs-block-summary-v2 .summary-item {
  transition: transform 0.3s ease;
}

.sqs-block-summary-v2 .summary-item:hover {
  animation: floaty-bob 1.6s ease-in-out infinite;
}

/* Keyframes for a soft, airy motion */
@keyframes floaty-bob {
  0%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-4px);
  }
}