OnMouse enter add opacity transition of image-CodePudding

I have two images one laying right on top of another. I figured out how to show the image onm ouse 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

Image one that is showed first

const imageOne = {
backgroundImage: "url('/images/h2.png')",
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
height: 400,
width: '100%',
position: 'relative',
zIndex: 1,
borderRadius: 5,
border: 'solid black 2px'

}

Image two that is shown when mouse hovers

    .overlay-image-1 {
  background-image: url("/images/h1.png");
  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;
}

Actual components

<Grid 
    onm ouseEnter={() => setHover(true)}
    onm ouseLeave={() => setHover(false)}
    style={imageOne}>
        <div style={{display: hover ? 'block' : ''}} 
        className='overlay-image-1'>
        </div>
    </Grid>

CodePudding user response：

CSS transitions wont work with display:none / display:block attributes, try:

visibility: hidden; & visibility: visible; for transitions to work properly.

to enabling the transition, simply set the opacity: 0; for visibility:hidden; and opacity:1; for visibility: visible;