调整屏幕大小时网格中的图像重叠

Question

我在使用 Divi 生成器构建的网站中添加了一些代码，目的是在图像网格上添加动画图像标题悬停效果 - 连续四张。一切看起来都很棒，除了当我调整屏幕大小时：然后图像开始重叠。

我做了很多研究并尝试了一段代码，但我无法解决这个问题。请帮我找出 CSS 代码的哪一部分代表这种重叠？

第 URL 页是：http://sylwia.studiopowisle.pl/bb/

.box {
  height: 250px;
  position: relative;
  overflow: hidden;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}

.box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.box .overbox {
  background-color: rgba(163, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 250px;
  height: 250px;
  padding: 130px 20px;
}

.box:hover .overbox {
  opacity: 1;
}

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size: 2.5em;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 0.8em;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
  text-align: center;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

.mendo-links {
  text-transform: lowercase;
  font-size: 36px;
  position: relative;
  color: white;
  text-shadow: 3px 0 29px rgba(0, 0, 0, 0.28);
  text-align: center;
  vertical-align: middle;
  margin-top: 26%;
}

.mendo-links-purpose {
  font-size: 40px;
  position: absolute;
  top: 40%;
  left: 21%;
  color: white;
  text-shadow: 3px 0 29px rgba(0, 0, 0, 0.28);
}

.mendo-links-passion {
  font-size: 40px;
  position: absolute;
  top: 40%;
  left: 23%;
  color: white;
  text-shadow: 3px 0 29px rgba(0, 0, 0, 0.28);
}

.mendo-lines {
  position: absolute;
  width: 37%;
  top: 33%;
  left: 32% !important;
}

.box:hover h4 {
  display: none;
  -webkit-transition: all 400ms ease-out;
  -moz-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
  -ms-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box:hover .mendo-lines {
  display: none;
  -webkit-transition: all 400ms ease-out;
  -moz-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
  -ms-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.mendo-links-outline {
  position: absolute;
  width: 91%;
  top: 5%;
  left: 4.5% !important;
}

.mendo-links-title {
  text-transform: lowercase;
  font-size: 25px;
  text-align: center;
  margin-top: -100px !important;
}

.mendo-links-title:first-letter {
  text-transform: uppercase;
}

.mendo-links-description {
  text-align: center;
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 22px;
  line-height: 18px;
  margin-bottom: 10px;
}

.mendo-links-read-more {
  color: white;
  font-size: 13px;
  font-weight: bold;
}

<a href="/core-values">
  <div class="box">
    <p>
      <img src="http://sylwia.studiopowisle.pl/wp-
           content/uploads/2017/04/Untitled-3.jpg" alt="" />
    </p>

    <div class="overbox">
      <p>
        <img class="mendo-links-outline" src="http://sylwia.studiopowisle.pl/wp-
          content/uploads/2017/04/outline-2.png" alt="" />
      </p>

      <div class="title overtext">
        <p class="mendo-links-title">Web Design</p>
      </div>

      <div class="tagline overtext">
        <p class="mendo-links-description">Synth jean shorts try-hard art party meh disrupt, forage offal ugh readymade cronut man braid. Readymade chartreuse pinterest sartorial, sustainable hoodie art party.
        </p>
        <p class="mendo-links-read-more">+ learn more</p>
      </div>
    </div>
  </div>
</a>

非常感谢您的帮助和时间，最好的问候，西尔维亚

Answer 1

问题是你手动设置了.box和.overbox的宽度为250px；

网格是响应式的，应该在调整 window 大小时调整图像大小，给它们固定宽度会使它们太大，这就是它们重叠的原因。

尝试给出 .box 和 .overbox width:auto; 并注意会发生什么。

调整屏幕大小时网格中的图像重叠

Images in grid overlapping when resizing the screen

html

css

grid

resize

overlap