title: OnMouse enter add opacity transition of image
body: <p>I have two images one laying right on top of another. I figured out how to show the image onMouse Enter but can't seem to figure out where to call the css transition property. Basically I'm trying to add a nice smooth transition of the showed image once the mouse hover over it. For now all I have is to set the display to 'block'  once the mouse enter but the experience of the image showing is abrupt. Please help</p>
  <p>Image one that is showed first</p>
  <pre><code>const imageOne = {
  backgroundImage: &quot;url('/images/h2.png')&quot;,
  backgroundRepeat: 'no-repeat',
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  height: 400,
  width: '100%',
  position: 'relative',
  zIndex: 1,
  borderRadius: 5,
  border: 'solid black 2px'
  </code></pre>
  <p>}</p>
  <p>Image two that is shown when mouse hovers</p>
  <pre><code>    .overlay-image-1 {
    background-image: url(&quot;/images/h1.png&quot;);
    object-fit: cover;
    opacity:1;
      background-size: cover;
      background-position: center;
      position:absolute;
      width:100%;
      height:100%;
      display:none;
      z-index:2;
      border-radius: 3px;
  }
  </code></pre>
  <p>Actual components</p>
  <pre><code>&lt;Grid 
      onMouseEnter={() =&gt; setHover(true)}
      onMouseLeave={() =&gt; setHover(false)}
      style={imageOne}&gt;
          &lt;div style={{display: hover ? 'block' : ''}} 
          className='overlay-image-1'&gt;
          &lt;/div&gt;
      &lt;/Grid&gt;
  </code></pre>