Eu tenho um card e nesse card tem uma imagem ou um video, o que eu estou tentando fazer inicialmente o card tem uma imagem só que quando o usuario colocar o mouse sobre a imagem preciso que ocorra uma transição suave de imagem para o video.
<Card>
{videos[index] ? (
<div
onMouseLeave={() => offVideos(index)}
onClick={() => irParaDetalhes(e.id)}>
<Player autoPlay src={video}>
<BigPlayButton position="center" />
</Player>
</div>
) : (
<Card.Img
variant="top"
src={play}
onMouseEnter={() => onVideos(index)}
/>
)}
</Card>