I've been working on a React project where I created a card that changes its image when hovered over. I wanted to add a smoother transition effect to the image change using
transition: opacity 0.25s ease-in-out;Could someone help me understand what's going wrong with my code?
View image here
import React, { useState } from 'react';
import './Article.css';
function Article(props) {
const [isHovered, setIsHovered] = useState(false);
return (
<div
className='article'
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<img
className='article__image'
src={isHovered ? props.hoverImage : props.image}
alt={props.title}
/>
<h3 className='article__title'>{props.title}</h3>
<p className='article__price'>{props.price}</p>
</div>
);
}
export default Article;
.article{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.article__image {
width: 100%;
height: 100%;
max-height: 250px;
object-fit:cover;
transition: opacity 0.25s ease-in-out;
}
I already tried using the transition property
transition: opacity 0.25s ease-in-out;