Overlay not sizing correctly CSS - html

Question

I want to place an overlay on my rounded image but when I set it, the overlay doesn't display over the image correctly? It is filling the column div. Not the overlay container. Can the overlay container be made to size to the image inside of it? I have tried display:inline-block;but that doesn't work. I am using Bootstrap.
HTML Code
<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;
}
Any help would be appreciated.
Thanks
Joe

Answer 1

I was able to get this working a bit better by making this working demo with a placeholder image I was able to link to.
http://codepen.io/anon/pen/ryYaWx?editors=1100
and then adding position: relative to the .overlaycontainer selector, like this:
.overlaycontainer {
display: inline-block;
position: relative; /* <-- this was added*/
}
This works because you have .overlay set to position: absolute and you want the absolute positioning to be relative to .overlaycontainer instead of the entire page. Adding this line will do that.