使用放大效果切换图像

Question

好的，所以基本上我正在为我的网站尝试一项功能，我希望在悬停时切换图像放大

我找到了一个网站，该网站的效果与我尝试在我的网站中复制的效果完全相同，但惨遭失败，并且没有任何反应，因为我是 [Transitions & Transforms] 样式的新手，有人可以指导我并帮助我实现它吗？提前致谢！

Reference website ：在这个网站中寻找 "Sherbat-e-Mohabbat" 部分，当您将鼠标悬停在图像上时会在其中发生这种效果 [屏幕截图：https://prnt.sc/ 1tl7aje]

我的代码结构：

<div class="image-wrapper">
  <div class="primary-image">
    <img class="img" src="src_url">
  </div>
  <div class="secondary-image">
    <img class="img" src="secong_src_url">
  </div>
</div>

Answer 1

您可以通过将第二张图片叠加在第一张图片上来做到这一点。
根据您的需要调整以下 css：

.image-wrapper > div {
  position: absolute;
  overflow: hidden;
}
.secondary-image img {
  transition: all .5s ease;
  opacity: 0;
}
.image-wrapper:hover .secondary-image img {
  transform: scale(1.10);
  opacity: 1;
}

.image-wrapper > div {
  position: absolute;
  overflow: hidden;
}
.secondary-image img {
  transition: all .5s ease;
  opacity: 0;
}
.image-wrapper:hover .secondary-image img {
  transform: scale(1.10);
  opacity: 1;
}

<div class="image-wrapper">
  <div class="primary-image">
    <img class="img" src="https://placeholder.pics/svg/300/FF6DD3">
  </div>
  <div class="secondary-image">
    <img class="img" src="https://placeholder.pics/svg/300/00FFD5">
  </div>
</div>