jQuery div extra height with image captions on hover

Question

I'm getting a weird 3px gap between the image and the overlay, it seems the overlay goes 3px OVER the image height wise. It works when I change the CSS to bottom:3px but I think that is a bit tacky. But have no idea where this space is coming from.

This is the code I'm using?

HTML

  <div class="item col-50">
    <div class="image-hover">
      <div class="image-hover-inner">
      <a href="<?php the_sub_field('project_index_link');?>">
      <img src="<?php the_sub_field('project_index_image'); ?>">

        <div class="image-caption">                    
          <div class="image-caption-inner">
          <h3 class="heading"><?php the_sub_field('project_index_title');?></h3>
          <p><?php the_sub_field('project_index_description');?></p>
          </div>
        </div>
        </a>
      </div>
    </div>
  </div>

SASS

.image-hover {
    position: relative;

        a,
        a:hover {
            color:white;
        }
}

.image-caption {
    position: absolute;
    top:0;
    right:0;
    bottom:3px;
    left:0;
}

.image-caption-inner {
    position: absolute;
    top:50%;
    width:100%;
    display:block;
    -webkit-transform: translatey(-50%);
    -moz-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    transform: translatey(-50%);
}

JQUERY

jQuery(document).ready(function($) {
    $('.image-caption').hide();
        $('.image-hover').hover( function() {
        $(this).find('.image-caption').fadeIn(300);
        }, function() {
        $(this).find('.image-caption').fadeOut(300);
    });
});

Answer 1

This happens because you have whitespaces rendered after the image (new lines, tabs, etc.). Browsers respect them and this leads to unwanted gap. The simple fix for your problem is temporary set a font-size to 0 on a level, and reset it back to original value for .image-caption :

.image-hover {
    position: relative;
        a,
        a:hover {
            color:white;
        }
}

.image-caption {
    ...
    bottom: 0;
    font-size: 16px;
}

Now you can set bottom: 0 and don't worry about any weird gaps.

Demo: http://jsfiddle.net/f8pjqam1/

Answer 2

I used your code.. only thing I added is just a border on .image-caption class so that we can see the boundary of overlay..

check the fiddle I have not found any gap in between... title and description are in middle on image..

.image-caption {
    position: absolute;
    top:0;
    right:0;
    bottom:3px;
    left:0;
    border:1px solid red;  /* this line added */
}

can you please tell us with the help of fiddle so that people can understand your problem..