使用放大效果切换图像

Posted 2023-03-06

【中文标题】使用放大效果切换图像

【英文标题】：Switch Image with Zoom In effect

【发布时间】：2021-11-18 10:18:36

【问题描述】：

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

我找到了一个网站，该网站的效果与我尝试在我的网站中复制的效果完全相同，但惨遭失败，并且没有任何反应，因为我是 [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>

【问题讨论】：

请分享Minimal, Reproducible Example

【参考方案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>

【讨论】：

好吧，顺便说一句，我一定会尝试一下很好的解决方案！

正是我想要的谢谢！