Hover Reveal Overlay

Blog30: Hover Reveal Overlay

A responsive grid of image cards where each post is a full-bleed cover photo under a bottom-anchored dark gradient, with the title always visible in white and the summary collapsed to zero height until hover reveals it via a max-height transition, plus the date and optional read time beneath, all wrapped in a Link to the post's href.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/blog30?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/blog30?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/blog30.tsx, plus the badge shadcn/ui primitive it uses for the section eyebrow.

Quick start

The installed file exports blog30Demo alongside the block: the exact props behind the preview above. Spread it to get a working card grid in one line.

import { Blog30, blog30Demo } from "@/components/beste/block/blog30";

export default function Page() {
  return <Blog30 {...blog30Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Blog30 } from "@/components/beste/block/blog30";

export default function Page() {
  return (
    <Blog30
      badge={{ label: "Explore", variant: "default" }}
      heading="Featured Stories"
      description="Hover to discover more."
      posts={[
        {
          image: { src: "/covers/design.jpg", alt: "Design" },
          title: "The Future of Design Systems",
          summary: "How design systems are evolving to meet demands.",
          date: "January 15, 2026",
          readTime: "8 min",
          href: "/blog/design-systems",
        },
      ]}
    />
  );
}

Props

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
};

type BlogPost = {
  image: { src: string; alt: string };
  title: string;
  summary: string;
  date?: string;
  readTime?: string;
  author?: Author;
  tags?: { label: string }[];
  href?: string;
};

Behavior notes

• The entire header block (badge, heading, description) only renders when at least one of those three props is present; with all three omitted the grid starts at the top.
• Each card is wrapped in a Next.js Link; when a post has no href the link falls back to "#", so a card with a missing href still renders as a clickable no-op anchor.
• The summary is hidden by default via max-h-0 overflow-hidden and expands to max-h-20 on hover through a group scoped as group/blog30, so nested groups elsewhere will not trigger it; there is no click, focus, or touch fallback for revealing the summary.
• The cover image scales to scale-110 on the same hover group, and the summary line only animates height, so on touch devices the summary stays collapsed.
• The readTime renders only when present, prefixed with a · separator; date renders unconditionally even if undefined, so an omitted date leaves a stray leading space before the separator.
• The BlogPost type carries author and tags fields, but the component never reads them; only image, title, summary, date, readTime, and href reach the DOM.
• Cards are keyed by array index, so reordering or filtering posts in place can cause React to reuse the wrong card state and images.