Subtle Logo Bounce on Hover for Squarespace header logo

Add a playful touch to your Squarespace site by making your header logo bounce gently when hovered over. This effect adds movement to your design without being too flashy, helping to catch visitors' attention while keeping your site feeling modern and interactive.

---

Step 1: Add Custom CSS

1. Navigate to Design > Custom CSS.

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

3. Save your changes.

.header-title-logo {
  display: inline-block;
  transition: transform 0.3s ease;
}

.header-title-logo:hover {
  animation: subtle-bounce 0.6s ease-in-out infinite;
}

@keyframes subtle-bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

Want it to bounce just once per hover?

Replace the infinite with forwards:

.header-title-logo:hover {
  animation: subtle-bounce 0.6s ease-in-out forwards;
}