过渡变换在卡外开始

Question

我有一张卡片，它有一个图像，通常一半图像显示在卡片之外。当鼠标悬停时，卡片图像会全高显示。

但我有一个问题。正如您在 gif 中看到的，将卡片悬停时。男子图像的高度已满，但首先显示在卡片底部之外。我想防止在过渡底部之外显示图像。开始从底部卡片到上方的过渡。

我的卡片风格

.card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.image {
  width: 100%;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  right: -45px;
  transform: translateY(48%);
  transition: all ease-in-out 0.2s;
}

.description {
  visibility: hidden;
  line-height: 25px;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.card:hover .image {
  width: 60%;
  right: 0;
  transform: translateY(0);
}

.card:hover .description {
  visibility: visible;
  opacity: 1; /* Change opacity to 1 when hovered */
}

.card:hover {
  overflow: visible;
}

Answer 1

我没有你的代码。

所以我自己尝试了一下并添加结果。

如果你想要这样的效果，

-css

黄色是.card

蓝色是.container

容器宽度=卡片宽度。

容器高度=卡片高度+100px。 //这是你的想法

.container {
    position: relative;
    height: 250px;
    background-color: blue;
    overflow: hidden;
  }
.card {
    position: absolute;
    bottom: 0;
    overflow:visible
    ...
  }

-html

<div class='container'>
  <div class='card'>
    ...
    ...
  </card>
</div>

希望我的回答能给你一点点帮助。

祝你好运！

哦，如果运行正常请不要忘记投票。