I am currently working with React and trying to change 2 images by hovering over them.
Here is what I have accomplished so far:
Card.js
<div className="image-wrapper">
<img src={sprites.front_default} className="image" alt="normal" />
<img src={sprites.back_default} className="image-hover" alt="hover" />
</div>
style.css
.image-wrapper {
position: relative;
}
.image-hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-out;
}
.image-hover:hover {
opacity: 1;
}
The main challenge I am facing is how to reduce the front image's opacity to 0 when hovering over the div. How can I achieve this?
I am able to achieve it without a fade effect, but transitioning the opacity is important.
This is how I do it without transition
<img
className="figure"
src={sprites.front_default}
onMouseOver={(e) => (e.currentTarget.src = sprites.back_default)}
onMouseOut={(e) => (e.currentTarget.src = sprites.front_default)}
alt={"pokemon"}
/>