CSS过渡效果不适用于图像

Question

我无法在以下代码中应用CSS过渡效果。实际上，我希望使用悬停时的过渡效果来平滑替换图像。

 .image-container{
        position: relative;
        cursor: pointer;
        align-items: center;
        display: flex;
    justify-content: center;
    transition: 5s ease-in-out;

    }
    .image-container:hover .xyz-replacement {
        display: block;
    }
    .xyz-replacement{
        display: none;
        position: absolute;
      bottom: 0;
        z-index: 9;
        
    }

<div class="image-container">

                     <img class="xyz rounded" src="https://i.imgur.com/fcRasFv.jpg" width="160">

                    <img class="xyz-replacement rounded" src="https://i.imgur.com/Iy7w1yJ.jpg" width="160">
                       
                   </div>