Image zoom on hover in React

image-zoom-on-hover-in-react.markdown

Image zoom on hover in React

A Pen by roman on CodePen.

License.

index.html

<div id="root"></div>

script.babel

const { Component } = React

const src = 'https://images.unsplash.com/photo-1444065381814-865dc9da92c0'
const imgwidth = 3000;
const imgheight = 2000;
const scale = 2;
class Zoom extends Component {
  state = {
    wrapper:{
      backgroundImage: `url(${src+1})`,
    backgroundPosition: '0% 0%'
    },
    img:{
      width: '100%'
    }
  }

  handleMouseMove = e => {
    const { left, top, width, height } = e.target.getBoundingClientRect()
    //console.log(e.target.getBoundingClientRect());
    const x = 100/scale - (e.pageX - left) / width * 100 * (1 * scale - width / imgwidth ) 
    const y = 100/scale - (e.pageY - top) / height * 100 * (1 * scale - height / imgheight)
    //this.setState({wrapper:{...this.state.wrapper, backgroundPosition: `${x}% ${y}%`}})
    this.setState({img:{...this.state.img, transform: `translate(${x}%, ${y}%) scale(${scale})` }})
    console.log(x," ",y, " ",left," ", top, " ",width, " ",height);
  }
handleMouseOver = e => {
  this.setState({img:{...this.state.img, width: imgwidth + 'px', height:imgheight + 'px' }})
}
  handleMouseOut = e => {
  this.setState({img:{...this.state.img, width: '100%', height:'100%', transform: 'none' }})
}
  render = () =>
    <div class="zoom" onMouseMove={this.handleMouseMove} style={this.state.wrapper} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
      <img style={this.state.img} src={src} />
    </div>
}

ReactDOM.render(<Zoom />, document.getElementById('root'))

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.css

.zoom {
  width: 600px;
  height: 400px;
  background-repeat: no-repeat;
  overflow:hidden;
}

figure:hover img {
  opacity: 1;
}

img {
  display: block;
  width: 100%;
  height: 30vw;
  pointer-events: none;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}