html - 在悬停图像上制作圆形叠加层

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>