Skip to content
Docs
Skew Image

Skew Image

A component that skews an image on hover.

requires interactionhover
Loading...

Installation

CLI

pnpm dlx shadcn@latest add https://animata.design/r/image/skew-image.json

Manual

Run the following command

It will create a new file called skew-image.tsx inside the components/animata/image directory.

mkdir -p components/animata/image && touch components/animata/image/skew-image.tsx

Paste the code

Open the newly created file and paste the following code:

import type { ImgHTMLAttributes } from "react";
import { cn } from "@/lib/utils";
 
interface SkewImageProps extends ImgHTMLAttributes<HTMLImageElement> {}
 
export default function SkewImage({ className, ...props }: SkewImageProps) {
  return (
    <div
      className={cn(
        "h-52 w-40 transition-all duration-300 ease-in-out [clip-path:polygon(0_0,100%_0,100%_100%,0_100%)]",
        "hover:scale-95 hover:[clip-path:polygon(0_5%,100%_0,100%_95%,0%_100%)] hover:[&>img]:scale-125",
      )}
    >
      <img
        alt=""
        {...props}
        className={cn(
          "transition-transform delay-150 h-full w-full object-cover duration-300 ease-in-out",
          className,
        )}
      />
    </div>
  );
}

Credits

Built by hari

Edit this page on GitHub
Images RevealTilted Cover