CSS悬停以交换具有过渡效果的图像

Question

我已经使用CSS在悬停上进行了图像交换。效果不错，但我希望它具有平滑的褪色效果。

.card {
  position: relative;
  display: inline-block;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

#yy1,
#yy2 {
  width: 300px;
}

<div class="card">
  <img src="/images/ee0.png" alt="Card Back" id="yy1">
  <img src="/images/ee1.png" class="img-top" alt="Card Front" id="yy2">
</div>

我该如何实现？

谢谢。