title: React component that zooms into an image while keeping dimensions on mouse over - React + Bootstrap
body: <p>So I have been looking all over the place over the past few days and cannot find anything that works. I am using React with Bootstrap. I want a stateless functional component that takes an image path and returns an img element which, when hovered over by the mouse, zooms into the image while keeping the dimensions of the element the same.</p>
  <p>I have tried:</p>
  <ol>
  <li>Changing the style attribute in the onMouseOver and onMouseOut events like so</li>
  </ol>
  <pre><code>import React from &quot;react&quot;;
  
  const ImageHoverZoom = ({ imagePath }) =&gt; {
    return (
      &lt;img
        src={imagePath}
        alt=&quot;&quot;
        style={{ overflow: &quot;hidden&quot; }}
        onMouseOver={(e) =&gt; (e.currentTarget.style = { transform: &quot;scale(1.25)&quot;, overflow: &quot;hidden&quot; })}
        onMouseOut={(e) =&gt; (e.currentTarget.style = { transform: &quot;scale(1)&quot;, overflow: &quot;hidden&quot; })}
      /&gt;
    );
  };
  
  export default ImageHoverZoom;
  </code></pre>
  <ol start="2">
  <li>Creating a custom css class and applying that to the img element.</li>
  </ol>
  <p>index.css:</p>
  <pre><code>.hover-zoom {
    overflow: hidden;
  }
  
  .hover-zoom img {
    transition: all 0.3s ease 0s;
    width: 100%;
  }
  
  .hover-zoom img:hover {
    transform: scale(1.25);
  }
  </code></pre>
  <p>imageHoverZoom.jsx:</p>
  <pre><code>import React from &quot;react&quot;;
  
  const ImageHoverZoom = ({ imagePath }) =&gt; {
    return (
      &lt;img
        src={imagePath}
        alt=&quot;&quot;
        className=&quot;hover-zoom&quot;
      /&gt;
    );
  };
  
  export default ImageHoverZoom;
  </code></pre>
  <ol start="3">
  <li>I have also tried a class component with state</li>
  </ol>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  class ImageHoverZoom extends Component {
    state = {
      path: this.props.imagePath,
      mouseOver: false,
    };
  
    render() {
      const { path, mouseOver } = this.state;
      return (
        &lt;img
          className={`img-fluid w-100`}
          src={path}
          onMouseOver={() =&gt; this.setState({ mouseOver: true })}
          onMouseOut={() =&gt; this.setState({ mouseOver: false })}
          style={
            mouseOver 
              ? { transform: &quot;scale(1.25)&quot;, overflow: &quot;hidden&quot;} 
              : { transform: &quot;scale(1)&quot;, overflow: &quot;hidden&quot;}
          }
          alt=&quot;&quot;
        /&gt;
      );
    }
  }
  </code></pre>
  <p>I would ideally not like  to use state as I know it gets updated asynchronously and I feel like that would lead to some lag on the client side when mousing over the image. Any help is much obliged, thank you in advance!</p>
  <p><strong>EDIT:</strong></p>
  <p>I tried Rahul's answer below in my project, as well as in a brand new project. Here are the relevant (I think) files. Same thing as before. No change on mouse over.</p>
  <p>App.js</p>
  <pre><code>import &quot;./App.css&quot;;
  import ImageHoverZoom from &quot;./common/imageHoverZoom&quot;;
  
  function App() {
    return &lt;ImageHoverZoom imagePath=&quot;http://picsum.photos/400/600&quot; /&gt;;
  }
  
  export default App;
  </code></pre>
  <p>imageHoverZoom.jsx</p>
  <pre><code>import React from &quot;react&quot;;
  
  const ImageHoverZoom = ({ imagePath }) =&gt; {
    return (
      &lt;div className=&quot;img-wrapper&quot;&gt;
        &lt;img src={imagePath} alt=&quot;&quot; className=&quot;hover-zoom&quot; /&gt;
      &lt;/div&gt;
    );
  };
  export default ImageHoverZoom;
  </code></pre>
  <p>index.css</p>
  <pre><code>.img-wrapper {
    overflow: hidden;
  }
  .hover-zoom img:hover {
    transform: scale(1.25);
  }
  </code></pre>