There is a mysterious 3px gap between the image and the overlay, causing the overlay to extend 3px beyond the height of the image. Switching the CSS to use bottom:3px fixes the issue, but it feels like a hacky solution. The source of this spacing conundrum remains elusive.
Here's the code snippet in question:
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);
});
});