Next Image Zoom

Medium.com image zoom style for Next.js optimized image component

Demo

Please check Demo here.

Installation

Install package with npm

NPM

  npm install --save next-image-zoom

Yarn

  yarn add next-image-zoom

Usage/Examples

First import Zoom component

import Zoom from "next-image-zoom";

layout={'responsive'}

import Zoom from "next-image-zoom";

<div style={{width: 700}}>
    <Zoom src={image1} layout={"responsive"}/>
</div>

layout={'fill'}

import Zoom from "next-image-zoom";

<div style={{flex: "1", height: 300, backgroundColor: "yellow"}}>
    <Zoom src={image4} layout={"fill"} objectFit={"contain"}/>
</div>

layout={'fixed'}

import Zoom from "next-image-zoom";

<Zoom src={image2} layout={"fixed"} width={200} height={400}/>

import Zoom from "next-image-zoom";

<Zoom src={"/surface-LCOnczVeFio-unsplash-2.jpg"} layout={"responsive"} width={800} height={500}/>

License

MIT

Support

For support, email [email protected].

🚀 About Me

I'm a full stack web developer that has hunger for learning new things 😋

🔗 Links