html - 如何使用悬停效果向上移动我的 div 元素

Question

所以我有一些代码，我认为它有 80% 正确，但我不知道为什么我的 div 会通过悬停来剪切我的图像。当悬停处于事件状态时，我的填充 p-1 从顶部删除。如何在不从顶部剪切图像的情况下通过悬停向上移动我的 div？

.move {
  transition: all 0.4s ease-in;
}

.hover:hover .move {
  margin-top: -50px;
}

.hover:hover {
  background: black;
}

.readmore {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-out;
}

.hover:hover .readmore {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

<div class="container mt-5 pt-5 ">
  <div class="row d-flex justify-content-center text-center  ">
    <div class="col-md-3  hover p-0">
      <div class="position-relative  move  d-flex  align-items-end p-1 ">
        <div class="position-absolute pb-3">
          <h1 class="headersize">asd</h1>
          <p class="small-text">
            Small text
          </p>
        </div>
        <img src="https://encrypted-tbn0.gstatic.com/images? 
      q=tbn:ANd9GcQzp0rXN9BsNzMPYmzdT6xWc931So2I5sA4YiBX4Nm0rT6MiPBS" class=" 
      mb-4" />
      </div>
      <div class=" mb-3">
        <button type="button" class="readmore p-2 m-2    ">
                    Read More
                  </button>
      </div>
    </div>
  </div>
</div>

Answer 1

出于某种原因，在 display:flex 容器中使用负边距不会影响容器元素的边距，这意味着如果子元素 . move 被赋予负边距值。

您可以尝试更改代码以不使用 flexbox。

或者，您可以尝试将负 margin-top 应用于 same 元素，作为在悬停时应用 background-color 的元素:

/* .hover instead of .move */
.hover {
  transition: all 0.4s ease-in;
}

.hover:hover {
  margin-top: -50px;
}

.hover:hover {
  background: black;
}

现在您正在为相同 元素着色和移动，这给人一种这是连贯移动动画的错觉。但是，一旦您为 .container 或 .row 设置了背景颜色，您就会得到相同的“错误”。