html - 让子div占据父div的全部大小

Question

HTML 文件:

<div class="one">
      <div class="two">
        <h2>ITEM NAME</h2>
      </div>
    </div>

CSS:

html, body {
  height: 100%;
width: 100%;
}


.one{
  display:block;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  width:50%;
  height:325px;
  background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
  background-size:cover;
}

.two{
  position:absolute;
  display:inline-block;
  width:100%;
  height:100%;
  background-color: gray;
  transition: all 0.3s ease-out; 
}

.two h2{padding-top: 20%;}

我想做一个悬停过渡效果，就像这个网站: Here
当您悬停链接时，您可以在投资组合中看到另一个浅蓝色 div 展开。我猜它正在使用 transform: scale() 我试图做类似的事情，但第二个 div 超过了父 div 的大小。我该如何解决？我究竟做错了什么？

另外，我有我的 codepen样本。

Answer 1

您正在使用的狮子图像具有沿边缘出现的透明背景，给人的印象是 div one 实际上比实际要小。将 div 的背景设置为背景颜色而不是图像，您就会明白我的意思。