April 8, 2026SimpleHover & 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.
Preview
Source
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>
);
}