切换具有放大效果的图像

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>

切换具有放大效果的图像

Switch Image with Zoom In effect

html

css

css-transitions

styling

css-transforms