オーバーレイが正しくサイズ変更されていません。CSS

Question

丸みを帯びたイメージにオーバーレイを配置したいのですが、設定するとオーバーレイが正しく表示されません。それは列divを充填しています。オーバーレイコンテナではありません。オーバーレイコンテナは、その内部のイメージとサイズを合わせることができますか？私はdisplay:inline-block;を試しましたが、それは動作しません。私はブートストラップを使用しています。

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

し、このように、.overlaycontainerセレクタにposition: relativeを追加：

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

あなたはposition: absoluteに.overlayセットを持っていて、絶対位置が.overlaycontainerからの相対になりたいので、これは動作しますページ全体ではなくこの行を追加するとそれが実行されます。