时间戳

首页 > 解决方案 > 如何防止在 CSS 图像过渡期间在网格布局中悬停时调整图像大小

html - 如何防止在 CSS 图像过渡期间在网格布局中悬停时调整图像大小

问题描述

我想要一个图像在悬停时转换到另一个图像。我目前有工作代码来执行此操作，除了顶部图像最初会自动重新缩放为更大的尺寸，因此当顶部图像从不透明 1 过渡到 0 时，图像看起来像是“移动”了，因为它是不同的大小比底部图像。我已经确认顶部和底部图像的尺寸相同。

我的代码和问题可以在这里的预览中看到：https ://jsfiddle.net/k3jLxofv/1/

在“Project Area 1”中，我们可以看到最初加载的 2 张图像。即使图像相同（我们可以看到两条线），一张图像也比另一张小。我不知道为什么一张图片比另一张大。我希望能够将鼠标悬停在“项目区域 1”上并进行无缝过渡，这样结果看起来就不会被移动。

“项目区域 2”显示图像应处于两种状态（未悬停和悬停时）的大小。

先感谢您！

.projects-grid-setup {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  grid-gap: 0.9rem;
  width: 98.3%;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.projects-tile {
  background: black;
}

.projects-tile-picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crossfade {
  position: relative;
}

.crossfade img.fade {
  position: absolute;
  left: 0;
  opacity: 1;
  transition: opacity 0.55s ease-in-out;
}

.crossfade img.top:hover {
  opacity: 0;
}
<div class="projects-grid-setup">
  <!--Project Start-->
  <a class="projects-tile" href="google.com" target="_blank">
    <div class="crossfade">
      <img class="projects-tile-picture top fade" src="https://picsum.photos/300/200?1" />
      <img class="projects-tile-picture" src="https://picsum.photos/300/200?1" />
    </div>
    <p class="projects-tile-title">
      Project Area 1
    </p>
  </a>
</div>

标签： htmlcss

解决方案

如下所述保持高度自动并尝试

.projects-tile-picture {
  width: 100%;
  height: auto;
  object-fit: cover;
}

推荐阅读