Images in grid overlapping when resizing the screen - html

Question

I have added some code to my website built using a Divi builder, in purpose add animated image caption hover effect, on grid of images - four in row.
Everything look great, except when I resize screen: then images starts to overlap.
I have made a lot of research and played with a code but i cant solve this issue. Please help me to find what part of CSS code stands for this overlapping?
Page URL is: 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>
Thank you ver much for your help and time,
Best greetings,
Sylwia

Answer 1

The problem is that you manually set the width of .box and .overbox to 250px;
There grid is responsive and should resize the images as you resize the window, giving them fixed width makes them too big and that's why they overlap.
Try giving .box and .overbox width:auto; and notice what happens.