为什么overlay没有响应？

Question

所以我有一个容器/div，里面有六张照片。在每一张照片中，当我悬停在它上面时，我想要有一个覆盖。但覆盖覆盖了整个div，而不仅仅是照片尺寸。也许问题是我有课？每个单独的照片都有六个css，这不是很糟糕吗？

下面是html：

<div id="info-pics">
    <div id="info-pics-container">
        <div class="info-pic-top">
        <img src="service-1.jpg" alt="service-1" style="width:100%;height:100%;">
            <div class="overlay">
                <div class="overlay-text">Ύστερα από συνεννόηση με εσάς αναζητούμε τις πιο προσιτές και κατάλληλες δυνατότητες και
ταιριαστά σχέδια ώστε να πετύχουμε ένα όμορφο αποτέλεσμα.
                </div>
            </div>
        </div>
        <div class="info-pic-top">
        <img src="service-2.jpg" alt="service-2" style="width:100%;height:100%;">
            <div class="overlay">
                <div class="overlay-text">Hello World
                </div>
            </div>
        </div>
        <div class="info-pic-top">
        <img src="service-3.jpg" alt="service-3" style="width:100%;height:100%;">
            <div class="overlay">
                <div class="overlay-text">Hello World
                </div>
            </div>
        </div>
        <div class="info-pic-top">
        <img src="service-4.jpg" alt="service-4" style="width:100%;height:100%;">
            <div class="overlay">
                <div class="overlay-text">Hello World
                </div>
            </div>
        </div>
        <div class="info-pic-top">
        <img src="service-5.jpg" alt="service-5" style="width:100%;height:100%;">
            <div class="overlay">
                <div class="overlay-text">Hello World
                </div>
            </div>
        </div>
        <div class="info-pic-top">
        <img src="service-6.jpg" alt="service-6" style="width:100%;height:100%;">
            <div class="overlay">
                <div class="overlay-text">Hello World
                </div>
            </div>
        </div>
    </div>
</div>

下面是CSS：

#info-pics {
    position:relative;
    height:800px;
}
#info-pics-container {
    background-color:grey;
    position:absolute;
    width:75vw;
    height:30vw;
    left:13%;
    top:15%;
}
/* Container needed to position the overlay. Adjust the width as needed */
.info-pic-top {
  float: left;
  width: 33.33%;
  height:50%;
  padding: 5px;
}
/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
/* When you mouse over the container, the overlay text will "zoom" in display */
.info-pic-top:hover .overlay {
  transform: scale(1);
}
/* Some text inside the overlay, which is positioned in the middle vertically and horizontally */
.overlay-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Answer 1

Just add position:relative

    .info-pic-top {
      float: left;
      width: 33.33%;
      height:50%;
      padding: 5px;
      position:relative;
    }

Answer 2

您错过了向选择器info-pic-top添加position: relative。试试这段代码。

.info-pic-top {
  float: left;
  width: 33.33%;
  height:50%;
  padding: 5px;
  position: relative;
}