Image Display Solution

Page Image Display and Full-Screen Presentation

Common solutions include:

• Display components that automatically compile multiple photos into an album, allowing full-screen viewing upon click.
• Independent detail pages with a large-screen image on the left and work information on the right.
• To enhance smoothness, a separate full-screen component is usually employed.

Here, we document a method where the image directly transitions to full-screen display. It involves minimal code and offers a better transition effect.

import { motion } from 'motion/react'

export default function ImageTransfrom() {
	const [display, setDisplay] = useState(false)

	return (
		<figure onClick={() => setDisplay(s => !s)} className='relative w-[240px] cursor-pointer'>
			<img src={src} className='opacity-0' loading='lazy' />
			<div
				className={
					display
						? 'fixed inset-0 z-[100] flex items-center justify-center bg-black/80 p-20 transition-colors duration-300 max-sm:p-4'
						: 'absolute inset-0 bg-black/0'
				}>
				<motion.img layout src={src} />
			</div>
		</figure>
	)
}

• The transition utilizes motion's layout.
• An additional div is used to wrap the image to change the spatial container.
• transition-colors should be applied specifically to the fixed state to avoid a "black flash" (bg-black).
• An extra opacity-0 image is added to stretch the content height.
  • This is not necessary if the container has a fixed width and height.