Cant figure out why this img has a small gap at the bottom all the across

It is the solid yellow block at the end of the img, the red is the body color. I changed the colors to make it more visible.

HTML

<div class="main-wrapper">

<div class="intro section">

<img class="img_intro" src="img/upsidedown.jpg" alt="">

<p class="intro_info">Get to know Robin, a lab and hound mix, with maybe a sprinkle of pit-bull in him. Robin has the most unique personality, that can not help to bring a smile to anybody’s face.</p>

</div>

</div>

CSS

.intro{

width: 100%;

text-align: center;

position: relative;

background-color: yellow;

}

.img_intro{

width:100%;

opacity: .5;

}

.intro_info{

width: 80%;

position: absolute;

top: 40%;

left: 10%;

opacity: 1

}

.intro:hover .img_intro{

opacity: 1;

}

.intro:hover .intro_info{

opacity: 0;