如何在图像之间删除空间，并修复:悬停选择器

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(不应将图像的高度和宽度定义为宽度=" 1179x1179"高度=" 480x480"。而是使用width =" 1179"高度=" 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>