html - 叠加层未正确调整 CSS 大小

Question

我想在我的圆形图像上放置一个叠加层，但是当我设置它时，叠加层没有正确显示在图像上？它正在填充列 div。不是覆盖容器。覆盖容器可以根据其中的图像调整大小吗？我试过 display:inline-block; 但它不起作用。我正在使用 Bootstrap。

HTML代码

   <div class="row" style="background-color:#ECECEC">
            <div class="col-md-4 col-sm-4" >
                <div class="overlaycontainer">
                    <img class="roundimg" src="images/george1x1.jpg" > 
                    <div class="overlay">
                        <div class="overlaytext">Hello World</div>
                    </div>
                </div>
                <center><h3>George Jones <br><small>Owner and Founder</small></h3></center>

            </div>

CSS

    .overlay{
position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
  border-radius: 50%;
  display:inline-block
}
.overlaycontainer{
display:inline-block
}
.overlaycontainer:hover .overlay{
opacity: 1;
}
.overlaytext{
color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.roundimg{
    max-width: 75%;
    height: auto;
    border-radius: 50%;
    padding-top:10px;
    display: block;
    margin: 0 auto;
}

如有任何帮助，我们将不胜感激。

谢谢 乔

Answer 1

通过使用我能够链接到的占位符图像制作这个工作演示，我能够更好地工作。

http://codepen.io/anon/pen/ryYaWx?editors=1100

然后将 position: relative 添加到 .overlaycontainer 选择器中，如下所示:

.overlaycontainer {
  display: inline-block;
  position: relative; /* <-- this was added*/
}

之所以可行，是因为您将 .overlay 设置为 position: absolute 并且您希望绝对定位相对于 .overlaycontainer 而不是整个页面。添加这一行即可。