Service cards with animated heading

PRO

Present services, team members or features with a polished hover interaction. Each card features title that glides upward on hover. The effect is handled entirely with CSS transitions, keeping things lightweight and smooth. Swap in any images, update the text, and adjust colours to match any project.

Copy

Unlock with Pro

Category

Code, Cursor & hover

Built with

Widgets

Container, Heading, Text editor

Need help?

Custom code

CSS

Custom css

The CSS to make the animation for this power up is included in the top level parent container Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.

.hover-headline {
  transition: transform 0.3s ease;
}

.card:hover .hover-headline {
  transform: translateY(-40px);
}