Blocks
Blog Hover Expand
A blog row where hovering a card widens it while the photo tilts in.
A ready-made blog block. Three posts sit in a row; the hovered card grows wider while its photo scales and tilts. The title draws an underline. Pure CSS.
Learn what's working now in motion
Playbooks, trends, and real tactics for ads, SEO, funnels, and automation—built for growth-focused teams.
Installation
pnpm dlx shadcn@latest add @tween-ui/blog-hover-expandUsage
app/page.tsx
import BlogHoverExpand from '@/components/tweenui/blog/blog-hover-expand';
export default function Page() {
return <BlogHoverExpand />;
}Pass your own posts to make it yours:
app/page.tsx
import BlogHoverExpand from '@/components/tweenui/blog/blog-hover-expand';
export default function Page() {
return (
<BlogHoverExpand
posts={[
{
title: 'How to brief an AI creative team',
date: 'March 12, 2026',
tags: ['Ads'],
image: '/photos/brief.jpg',
imageAlt: 'Campaign briefing',
href: '/blog/brief',
},
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | sample heading | Section heading. |
description | string | sample line | Supporting line. |
posts | BlogHoverExpandPost[] | 3-post sample | Cards in the row. |
Each post is { title, date, tags, image, imageAlt, href }. Extends native
<section> attributes (className, style, …).
Accessibility
Cards are real links with image alt text. Hover (and keyboard focus) expands
the active card. Under prefers-reduced-motion: reduce the width, photo tilt,
and title underline do not animate.