title: Making rollover between 2 images by hover
body: <p>I'm using React and try to change 2 images by hovering them.<br />
  This is what I have done so far:</p>
  <p>Card.js</p>
  <pre><code>&lt;div className=&quot;image-wrapper&quot;&gt;
      &lt;img src={sprites.front_default} className=&quot;image&quot; alt=&quot;normal&quot; /&gt;
      &lt;img src={sprites.back_default} className=&quot;image-hover&quot; alt=&quot;hover&quot; /&gt;
    &lt;/div&gt;
  </code></pre>
  <p>style.css</p>
  <pre><code>.image-wrapper {
    position: relative;
  }
  
  .image-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-out;
  }
  .image-hover:hover {
    opacity: 1;
  }
  </code></pre>
  <p><strong>The main problem is that i want to make the front image opacity to 0 when im hovering the div, how can i make it?</strong></p>
  <p>I can make it without the fade changing but its important to make it with transition.<br />
  This is how I make it without transition</p>
  <pre><code>&lt;img
          className=&quot;figure&quot;
          src={sprites.front_default}
          onMouseOver={(e) =&gt; (e.currentTarget.src = sprites.back_default)}
          onMouseOut={(e) =&gt; (e.currentTarget.src = sprites.front_default)}
          alt={&quot;pokemon&quot;}
        /&gt;
  </code></pre>