Question

我正在创建页面，但遇到了几个问题。第一个问题是图像之间的间隔每次都不同。第二个问题是当我将鼠标悬停在一个图像上时，其他图像的所有文本也会显示。

<style>

.image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}
.container:hover .image {
  opacity: 0.8;
  background-color: black;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: relative;
  top: -270px;
  left: 50%;
  width: 400px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}



.container:hover .middle {
  opacity: 0.8;
}

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

</style>

<div class="container">
  <p>
    <img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/applestore_large.png?v=1562167947" height="480x480" width="1179x1179" alt="" />
  </p>
</div>
<div class="container">
  <p>
    <iframe width="1179x1179" height="480x480" src="https://www.youtube.com/embed/zhEAhiPo5GE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">    
    </iframe>
  </p>
</div>
<div class="container">
  <img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/smart_large.jpg?v=1562170226" alt="" class="image" width="1179x1179" height="480x480" />
  <div class="middle">
    <div class="text">Check out our custom <br /> smart kitchen gallery here
    </div>
  </div>
</div>
<div class="container">
  <p>
    <img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/laptopRepair_large.jpg?v=1561171348" class="image" width="1179x1179" height="480x480" alt="" />
  </p>
  <div class="middle">
    <div class="text">We Service &amp; Repair All          <br /> Types of Electronics</div>
    </div>
  </div>
  <div class="container">
  <p>
    <img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/electric_car_large.jpeg?v=1562179941" width="1179x1179" height="480x480" alt="" />
  </p>
  <div class="middle">
    <div class="text">Electric Car Charging <br />          Base Installation
    </div>
  </div>
</div>

我希望图像具有相同的间距（较小的空间），并且只有当我将鼠标悬停在其自身的图像上时，文本才会显示

Answer 1

在代码中需要解决很多事情才能对问题进行排序：

1）图像和iframe的高度和宽度不应定义为width =“ 1179x1179” height =“ 480x480”。而是使用width =“ 1179” height =“ 480”

2）文本类上的填充物在图像之间创建了额外的空间。为了解决这个问题，我从段落标签中取出了图像。由于段落具有默认边距，因此我在容器类上放置了边距。我还相对于容器元素将容器类定位为相对，然后将中产阶级定位为绝对。

3）文本悬停在错误的图像上方，因为中产阶级的最高排名为-270px。我只是给了这个职位40％的职位。这可能不是您想要的确切位置，但是您可以使用这些值来获得所需的内容

.image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}

.container {
  position: relative;
  margin: 26px 0px;
}

.container:hover .image {
  opacity: 0.8;
  background-color: black;
}

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

.container:hover .middle {
  opacity: 0.8;
}

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

<div class="container">
  <img src="https://picsum.photos/1179/480" height="480" width="1179" alt="" />
</div>
<div class="container">
  <iframe height="480" width="1179" src="https://www.youtube.com/embed/zhEAhiPo5GE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">    
        </iframe>
</div>
<div class="container">
  <img src="https://picsum.photos/1179/480" alt="" class="image" height="480" width="1179" />
  <div class="middle">
    <div class="text">
      Check out our custom <br /> smart kitchen gallery here
    </div>
  </div>
</div>
<div class="container">
  <img src="https://picsum.photos/1179/480" class="image" height="480" width="1179" alt="" />
  <div class="middle">
    <div class="text">
      We Service &amp; Repair All
      <br /> Types of Electronics
    </div>
  </div>
</div>
<div class="container">
  <img src="https://picsum.photos/1179/480" height="480" width="1179" alt="" />
  <div class="middle">
    <div class="text">
      Electric Car Charging <br /> Base Installation
    </div>
  </div>
</div>

如何删除图像之间的空间，并修复：hover选择器？

1 个答案: