April 8, 2026/Simple/Hover & Reveals

Image Scale on Hover

Image starts slightly scaled up (1.1) inside an overflow-hidden container and returns to scale(1) on hover. The container clips the overflow, giving the image room to breathe inward.

import ImageScaleOnHover from "./index.jsx";
import { imageScaleOnHover } from "../demo-data.js";
import styles from "./demo.module.css";

export default function ImageScaleOnHoverDemo() {
  return (
    <div className={styles.demo}>
      <div className={styles.top}>
        <p className={styles.label}>Portfolio — 2024</p>
        <h2 className={styles.heading}>Selected Work</h2>
      </div>
      <ImageScaleOnHover {...imageScaleOnHover} />
    </div>
  );
}

Related Components

3MO AGO
Pixelate Imagehover-reveals
3MO AGO
Reveal Grouphover-reveals
3MO AGO
Clip-Path Inset Revealhover-reveals