在鼠标悬停在图像上时显示文本

Question

我正在尝试在用户将鼠标悬停在图像上时在图像顶部显示一些版权文本，使用 this 示例。

我看不到文字，只看到褪色效果，我错过了什么？

<div class="list-group-item">
    <div class="row">
        <div class="col-12 col-md-4 vertical-center-col">
            <img class="img-thumbnail" src="media/images/EmployeeOne.jpg" alt="">
        </div>
        <div class="middle">
            <div class="text">Image Copyright</div>
        </div>
        <div class="col-12 col-md-8 mt-2 mt-md-0">
            <strong>EmployeeOne</strong>
        </div>
    </div>
</div>

这是我的 css 文件：

.card-img-top {
  min-height: 0.1px;
}

img.img-thumbnail {
  border: 1px solid #e4c9c9;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.text {
  background-color: #04aa6d;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.img-thumbnail:hover {
  opacity: 0.3;
}

.img-thumbnail:hover .middle {
  opacity: 1;
}

Answer 1

将您的 .middle div 放入与您的图像相同的容器中，然后 select 使用 adjacent sibling CSS [=24= 悬停它]或

.card-img-top {
  min-height: 0.1px;
}

img.img-thumbnail {
  border: 1px solid #e4c9c9;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  pointer-events:none;
}

.text {
  background-color: #04aa6d;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.img-thumbnail:hover {
  opacity: 0.3;
}

.img-thumbnail:hover+.middle {
  opacity: 1;
}

<div class="list-group-item">
  <div class="row">
    <div class="col-12 col-md-4 vertical-center-col">
      <img class="img-thumbnail" src="https://www.gardendesign.com/pictures/images/675x529Max/site_3/helianthus-yellow-flower-pixabay_11863.jpg" alt="">
      <div class="middle">
        <div class="text">Image Copyright</div>
      </div>
    </div>
    <div class="col-12 col-md-8 mt-2 mt-md-0">
      <strong>Employee name</strong>
    </div>
  </div>
</div>

在鼠标悬停在图像上时显示文本

Displaying text on mouse hovering over image

html

css

image

mousehover