Overlay to be the same shape as the image

Question

I need overlay to be the same shape as the image but the overlay is covering the whole container. I need it to be rounded and the same size as the image.

I tried removing the width 100% on the overlay but then the overlay doesn't appear at all. What am I doing wrong? Any help would be appreciated.

HTML:

<div class="imgoverlay text-light"><img src="https://www.ardenestates.co.uk/resource/team-photos/andy-lansbury-headshot.png">
  <div class="overlay"><span class="overlaycolor"></span>
    <div class="overlayinfo" style="margin-top: -14px;">
      <ul class="socialmedia-widget">
        <li><a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a></li>
      </ul>
    </div>
  </div>
</div>

CSS:

.imgoverlay {
  position: relative;
  overflow: hidden;
  display: block;
  max-width: 100%;
}

.imgoverlay img {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius: 100%;
}

.imgoverlay .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.imgoverlay .overlaycolor {
  width: 100%;
  height: 100%;
  background: #000000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.imgoverlay .overlayinfo {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  top: 45%;
  left: 0;
  -webkit-transition: top 0.3s ease;
  -moz-transition: top 0.3s ease;
  -o-transition: top 0.3s ease;
  -ms-transition: top 0.3s ease;
  transition: top 0.3s ease;
}

.imgoverlay:hover img {
  transform: scale(1.07);
  -ms-transform: scale(1.07);
  -webkit-transform: scale(1.07);
}

.imgoverlay:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

JSFiddle Demo

Answer 1

Make the .imgoverlay display to inline-block and give the border-radius: 100%;(50% is enough) on .imgoverlay not on img. So your CSS should be

.imgoverlay {
  position: relative;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
  border-radius: 100%;
}

.imgoverlay img {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.imgoverlay .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.imgoverlay .overlaycolor {
  width: 100%;
  height: 100%;
  background: #000000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.imgoverlay .overlayinfo {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  top: 45%;
  left: 0;
  -webkit-transition: top 0.3s ease;
  -moz-transition: top 0.3s ease;
  -o-transition: top 0.3s ease;
  -ms-transition: top 0.3s ease;
  transition: top 0.3s ease;
}

.imgoverlay:hover img {
  transform: scale(1.07);
  -ms-transform: scale(1.07);
  -webkit-transform: scale(1.07);
}

.imgoverlay:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

Answer 2

Try this

.imgoverlay {
  position: relative;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
  border-radius: 50%;
}

.imgoverlay img {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius: 100%;
  display: block;
}

.imgoverlay .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.imgoverlay .overlaycolor {
  width: 100%;
  height: 100%;
  background: #000000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.imgoverlay .overlayinfo {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  top: 45%;
  left: 0;
  -webkit-transition: top 0.3s ease;
  -moz-transition: top 0.3s ease;
  -o-transition: top 0.3s ease;
  -ms-transition: top 0.3s ease;
  transition: top 0.3s ease;
}

.imgoverlay:hover img {
  transform: scale(1.07);
  -ms-transform: scale(1.07);
  -webkit-transform: scale(1.07);
}

.imgoverlay:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

<div class="imgoverlay text-light"><img src="https://www.ardenestates.co.uk/resource/team-photos/andy-lansbury-headshot.png">
  <div class="overlay"><span class="overlaycolor"></span>
    <div class="overlayinfo" style="margin-top: -14px;">
      <ul class="socialmedia-widget">
        <li><a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a></li>
      </ul>
    </div>
  </div>
</div>