在悬停图像上进行圆形覆盖

Question

我有以下图像，并且要在其上悬停时显示一个圆形的叠加层。现在是椭圆形。我该怎么办？

.container {
  position: relative;
  width: 50%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  opacity: 0.5;
  transition: .5s ease;
  background-color: rgb(186, 68, 0);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="../assets/images/pathologiessmall.jpeg" width="130" height="130" class="image" />
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

这是代码。是文字或重叠式广告的问题。对我来说，显然是叠加层。我必须在这里写它，因为否则我无法发布，因为此文本框不允许我发布。因此，我感到遗憾的是，由于堆栈溢出规则，我不得不讲述自己的人生故事。

Answer 1

我认为这是您想要做的：（我只在container的CSS中添加了以px为单位的大小以匹配您的图像大小）

.container {
  position: relative;
  width: 130px;   /* Modified */
  height: 130px;  /* Added */
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  opacity: 0.5;
  transition: .5s ease;
  background-color: rgb(186, 68, 0);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="../assets/images/pathologiessmall.jpeg" width="130" height="130" class="image" />
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Answer 2

您应将宽度和高度的比例设置为1：1比例
1）您可以手动设置宽度和高度等于图片

2）您可以这样设置宽度等于高度

APIView

Answer 3

谢谢。

@Takit Isy，我已经回答了您的问题，因此不得不在左边添加10％的叠加层。 如果添加更多图像，我会查看是否可行，但是这个主意很好。再次感谢！

.container {
  position: relative;
  width: 150px;   /* Modified */
  height: 130px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10%;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  opacity: 0.5;
  transition: .5s ease;
  background-color: rgb(186, 68, 0);
}