CODEWITHSUNDEEP
htmlcssreactjsanimationhover
frankieseattle
frankieseattle

Reputation: 181

OnMouse enter add opacity transition of image

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

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 
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    style={imageOne}>
        <div style={{display: hover ? 'block' : ''}} 
        className='overlay-image-1'>
        </div>
    </Grid>

Upvotes: 0

Views: 81

Answers (1)

Digital Forest
Digital Forest

Reputation: 26

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;

Upvotes: 1

Related Questions