Framer Motion Image Gallery: Hover Effects Prompt & Code

This prompt instructs an AI coding assistant to generate a React-based image gallery component powered by Framer Motion, complete with hover animations, layout transitions, and a smooth toggle between a grid overview and an expanded detail view. It is especially useful for frontend developers who want a polished, production-ready UI pattern without writing every animation keyframe from scratch. The resulting code typically demonstrates Framer Motion's layoutId for shared-element transitions, whileHover for scale or overlay effects, and AnimatePresence for mounting and unmounting views gracefully.

Real-world applications include portfolio sites, e-commerce product listings, photography showcases, and any interface where visual content needs to feel responsive and engaging. To reproduce it, paste the prompt into a capable code-generation model such as GPT-4o or Claude 3.5, then drop the output into a Next.js or Vite project with Framer Motion installed. For variations, try adding drag-to-reorder functionality, staggered entrance animations, or a lightbox modal overlay to further enrich the user experience.