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上的背景设置为背景颜色而不是图像，您将看到我的意思。

Answer 2

我要求帮忙：

.one{
  display:block;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  width:510px;
  height:330px;
  background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
  background-size:cover;
  border:1px solid blue;
}

.two{
  position:absolute;
  display:block;
  width:10%;
  height:10%;
  background-color: gray;
  transition: all 0.3s ease-out;
  margin-left:50%;
  margin-top:30%;
  opacity:0;
  border-radius:100px;
}

.two h2{margin-top: 20%; margin-left:20%;}

.one:hover .two{
  display:inline-block;
  opacity: 1;
  width:100%;
  height:100%;
  -webkit-transform: scale(1);
  margin:0px !important;
  border-radius:2px !important;
}

使子div占据父div的全部大小

2 个答案: