Image gets abnormally scaled when hovering on other images - html

Question

I have a site which has a couple of images and I implemented a hover effect on the images but for some reason, one of my other images (in another div scales up and gets misaligned). I thought this might be because of some conflicting classes. But that doesn't seem to be the case.
Since, I might have to upload the code for the whole site. I've uploaded it on a JSFiddle.
Here it is: https://jsfiddle.net/40swprv2/7/
Here's the error causing code
.tile {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.8);
}
.tile:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
The code causing the error is in style.css line 263 - 303 of the JSFiddle. I've commented it out for now so u can see the result.
What am I doing wrong?