Question

我需要覆盖层与图像具有相同的形状，但是覆盖层要覆盖整个容器。我需要将其四舍五入并与图像大小相同。

我尝试删除覆盖图上的宽度100％，但是覆盖图根本没有出现。我究竟做错了什么？任何帮助将不胜感激。

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

将.imgoverlay display设为inline-block，然后在border-radius: 100%;上而不是.imgoverlay上输入img（50％足够）。所以您的CSS应该是

.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

尝试一下

.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>

覆盖层与图片的形状相同

2 个答案: