1
我已經添加了一些代碼到使用Divi生成器構建的網站中，用於在圖像網格中添加動畫圖像標題懸停效果 - 四行。 除了當我調整屏幕大小時，一切看起來都很棒：圖像開始重疊。調整屏幕大小時網格重疊的圖像
我已經做了大量的研究，並與代碼玩，但我無法解決這個問題。請幫我找出CSS代碼的哪一部分代表這種重疊？
頁網址是：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>謝謝版本太多的幫助和時間， 最好的問候， 瑟爾維亞