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.

r/webdev - Img not fitting div issue


<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>





width: 100%;

text-align: center;

position: relative;

background-color: yellow;




opacity: .5;



width: 80%;

position: absolute;

top: 40%;

left: 10%;

opacity: 1


.intro:hover .img_intro{

opacity: 1;


.intro:hover .intro_info{

opacity: 0;

Source link

Write A Comment