Making rollover between 2 images by hover - css

Question

I'm using React and try to change 2 images by hovering them.
This is what I have done 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 problem is that i want to make the front image opacity to 0 when im hovering the div, how can i make it?
I can make it without the fade changing but its important to make it with transition.
This is how I make 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"}
/>

Answer 1

You can use just HTML & CSS. In the Card:
<div className="image-wrapper">
<img
src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"
className="pokemon-image"
alt="normal"
/>
<img
src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png"
className="pokemon-image pokemon-image--back"
alt="normal"
/>
</div>
Here, I've used one class pokemon-image to position the two images at the center of the image-wrapper element, and pokemon-image--back as the class that is showed when hovering over the image-wrapper element.
The CSS:
.image-wrapper {
width: 200px;
height: 150px;
background-color: #f7f7f7;
position: relative;
}
.pokemon-image {
position: absolute;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
.pokemon-image--back {
opacity: 0;
transition: opacity 1s ease-out;
}
.image-wrapper:hover .pokemon-image--back {
opacity: 1;
}
Hope this helps. You can try it in this codesandbox.