Could someone assist me with removing the excessive white space between these two images? Each image is contained within its own respective div, with layer effects applied when hovered over. I've attempted changing the display to inline-block and setting the font-size to 0, but so far, nothing has been successful in reducing the space. Additionally, I would like both images to be centered once adjusted. It's possible that I may have incorrectly applied these modifications to various classes or divs throughout the process, but I'm unsure where exactly I went wrong.
I've included the HTML and CSS files, along with a screenshot demonstrating how it appears on my local server. I hope these attachments prove helpful. Thank you for any assistance you can provide.
https://i.stack.imgur.com/Ei366.png
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img{
width: 100%;
display: block;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3{
bottom: 49%;
opacity: 1; <div class="row">
<div class="campus-col">
<img src="#">
<div class="layer">
<a href="#"><h3>TEXT</h3></a>
</div>
</div>
<div class="campus-col">
<img src="#">
<div class="layer">
<a href="#"><h3>MESSENGER</h3></a>
</div>
</div>
</div>