时间戳

首页 > 解决方案 > 使用放大效果切换图像

html - 使用放大效果切换图像

问题描述

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

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

参考网站：在本网站中查找“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>

标签： htmlcsscss-transitionsstylingcss-transforms

解决方案

您可以通过将第二个图像叠加在第一个图像上来做到这一点。
根据您的需要调整以下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>

推荐阅读