скользящие титры: невозможно получить div, чтобы идеально соответствовать изображению

Question

Я искал, но не нашел ответа на конкретную проблему, которую у меня есть.

Я хотел использовать скользящие субтитры для изображений в своем блоге об искусстве. Проблема заключалась в том, что мне нужен контейнер для адаптации к переменным высотам изображения, поэтому мне не пришлось входить и устанавливать его вручную каждый раз, когда я отправляю что-то новое. То, что у меня до сих пор, действительно близко к работе, но ...

Размер div на 5 пикселей больше изображения, независимо от высоты изображения. Я сделал красный фон div, так что легко увидеть перекрытие, но я просто не могу понять, откуда эти 5 пикселей.

Я действительно новичок в этом и изменил все значения css, о которых я мог думать, и искал другие примеры, но я все еще не мог получить перекрытие. Любая помощь была бы потрясающей. Я так близко (я думаю), но я не знаю, что еще попробовать. Вот большинство CSS с jsfiddle ссылке ниже:

/* 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; 
} 

http://jsfiddle.net/nun243j1/

Еще раз спасибо заранее!

Answer 1

Возможно, это связано с пробелом между элементами. Примените image {display: block;} к изображениям, чтобы устранить эту проблему.