css - 隐藏稍后随悬停弹出动画上升的 div 部分(仅限 CSS)

Question

引用代码笔:http://codepen.io/anon/pen/XbzJyR

.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;
}

任何人都可以告诉我如何隐藏延伸超过绿色瓷砖的容器的红色部分吗？我想创建一个缩略图效果，以便只有“测试”和围绕测试的红色背景的一部分首先出现在图 block 中，并且在将鼠标悬停在图 block 上时，红色背景向上移动并填充整个图 block 。简而言之，红色图 block 下方的 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>