CODEWITHSUNDEEP
cssreactjsanimationhover
frankieseattle
frankieseattle

Reputation: 181

onMouseEnter add a opacity transition

I am building a create react app and would like to add a opacity fade-in transition to an image overlay using OnMouseEnter. I know how to do it the traditional way of :hover but need clarity for applying it to react components. The code below doesn't apply and transition effect. Thanks for the help

    .overlay-image-3 {
  background-image: url("../public/images/h5.png");
    background-size: cover;
    background-position: center;
    opacity:1;
    position:absolute;
    width:100%;
    height:100%;
    display:none;
    z-index:2;
    border-radius: 3px;
    transition: opacity 0.1s ease;

}



    const [hover, setHover] = useState(false);
 <Grid 
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={imageOne}>
 
            <div
            className='overlay-image-1'></div>
        </Grid>

Upvotes: 1

Views: 530

Answers (1)

muhsen97
muhsen97

Reputation: 87

The problem could be the way that you are handling the change to the hover state. If imageOne is an object that represents the hovering effects, then you could say:

 <Grid 
   onMouseEnter={() => setHover(true)}
   onMouseLeave={() => setHover(false)}
   style={hover ? imageOne : /* you can put default styles here */ }>
 
   <div
     className='overlay-image-1'>
   </div>
  </Grid>

Upvotes: 1

Related Questions