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;