Need assistance with implementing this code using styled components or CSS for transitions.
The code from style.css:
.slide {
opacity: 0;
transition-duration: 1s ease;
}
.slide.active {
opacity: 1;
transition-duration: 1s;
transform: scale(1.08);
}
And the JSX code:
<div
className={index === current ? 'slide active' : 'slide'}
key={index}
>
{index === current && (
<img src={slide.image} alt='travel image' className='image' />
)}
</div>
Would appreciate any guidance on how to implement this in styled components or utilize the CSS transitions effectively.