I've been searching but haven't found an answer for the specific problem I'm having.
I wanted to use sliding captions for the images on my art blog. The challenge was that I needed the container to adapt to variable image heights so I didn't have to go in and set it manually every time I post something new. What I have so far is really close to working but...
The div is 5 pixels bigger than the image, regardless of the image's height. I made the div background red so it's easy to see the overlap, but I just can't figure out where those 5 pixels are coming from.
I'm really new at this and changed all the css values I could think of and searched for other examples but I still couldn't get the overlap to go away. Any help would be awesome. I'm so close (I think) but I don't know what else to try. Here's most of the css with a jsfiddle link below:
/* variable container adapts to image size (plus 5 unwanted pixels) */
/* I made the background red so you can see where it's too big */
div#imgContainer {
min-width: 20px;
min-height: 20px;
display:inline-block;
background:red;
}
.postContainer {
position:relative;
overflow:hidden;
background: red;
}
.postContainer .postTextbox {
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
margin-bottom:-15%;
margin-left:auto;
margin-right:auto;
opacity: 0;
border:0px;
background: black;
}
.postContainer:hover .postTextbox {
margin-bottom:0;
opacity: 1;
}
.postTextbox {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Thanks again in advance!
It may be because of white-space between elements. Apply image {display: block;} for images to remove this problem.