Добавление перехода при изменении изображения при наведении ⇐ CSS

[Гость]

Я работаю над проектом реагирования и создал карточку с изображением, которое меняется, когда вы наводите на него курсор, и я хотел бы добавить переход, когда изображение меняется, чтобы оно задушило, я попробовал использовать переход: непрозрачность 0,25 с, легкость вывода; но это не работает.

вот мой код, может кто-нибудь мне помочь
введите сюда описание изображения

import React, { useState } из 'реагировать'; импортировать './Article.css'; // импортируем бумагу из '@mui/material/Paper'; функция Статья(проблемы) { const [isHovered, setIsHovered] = useState (false); возвращаться ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {probs.title} {probs.price
); } экспортировать статью по умолчанию;
.article{ ширина: 100%; высота: 100%; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; } .article__image { ширина: 100%; высота: 100%; максимальная высота: 250 пикселей; объект подходит: обложка; переход: непрозрачность 0,25 с, легкость выхода; } я попробовал использовать свойство перехода переход: непрозрачность 0,25 с, легкость выхода; мне бы хотелось, чтобы первое изображение исчезло и показало второе изображение на чем-то, что делает переход каким-то другим