隐藏 div 中随后随着悬停弹出动画而上升的部分（仅限 CSS）

Question

.container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 100px 0 0 50px;
  padding: 0;
  background: green;
}

.hover {
  position: absolute;
  top: 50px;
  left: 0;
  background-color: red;
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  transition-duration: 0.5s;
}

.container:hover .hover {
  animation: up-bump 0.4s ease; 

  top: 0px;
}

任何人都可以告诉我如何隐藏容器中超出绿色方块的红色部分吗？我想创建一个缩略图效果，以便只有 "Test" 和测试周围的红色背景的一部分首先出现在图块中，并且在将鼠标悬停在图块上时，红色背景向上移动并填充整个图块。简而言之，红色图块下方的 50px 不应按原样显示。

Answer 1

将 overflow: hidden; 添加到容器将解决此问题。

.container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 100px 0 0 50px;
  padding: 0;
  overflow:hidden;
  background: green;
}

.hover {
  position: absolute;
  top: 50px;
  left: 0;
  background-color: red;
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  transition-duration: 0.5s;
}

.container:hover .hover {
  animation: up-bump 0.4s ease; 

  top: 0px;
}

<div class="container">
  <div class="hover">
    <h3>Test</h3>
    <p>Hello there!</p>
  </div>
</div>

隐藏 div 中随后随着悬停弹出动画而上升的部分（仅限 CSS）

Hide portion of div that later rises with hover pop-up animation (CSS only)

css

popup

hover