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

您错过了将position: relative添加到选择器info-pic-top的操作。试试这个代码。

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

为什么覆盖层无响应？

2 个答案: