Medium zoom-effect in Gatsby
Install the react-medium-image-zoom package:
bash
1npm i react-medium-image-zoom
Create a zoomedImage.js
component:
js
1import React from 'react';2import Image from 'gatsby-image';3import Zoom from 'react-medium-image-zoom';4import 'react-medium-image-zoom/dist/styles.css';56const wrapperStyle = {7 width: '100%',8 height: '100%',9};1011const ZoomedImage = props => {12 return (13 <Zoom>14 <Image style={wrapperStyle} {...props} />15 </Zoom>16 );17};1819export default ZoomedImage;
Then, in your stylesheet:
css
1[data-rmiz-wrap='visible'],2[data-rmiz-wrap='hidden'] {3 width: 100%;4 height: 100%;5 display: block;6}