Наложение прерываний при наведении

ОБНОВИТЬ:

Было предложено включить мой HTML-код, обратите внимание, что это использование Handlebars для моего кода NodeJS:

<div id='grid'>
    {{#each projects}}
        <img src='{{image_path}}' id='image-{{id}}' class='gridImage'>
        <div id='overlay-image-{{id}}' class='overlay'>
            <div class='detail'>
                <span style='font-size: 18px; font-family:OpenSans-Bold'>{{name}}</span>
                <br><br>
                {{shortDescription}}
                <br><br>
                Made by {{developers}}
            </div>
        </div>
    {{/each}}
</div>

У меня есть сетка изображений, когда вы наводите курсор на каждое изображение, он расскажет вам что-то об изображении, используя оверлей div. Как это.

Теперь вот код jQuery для этого:

$('.gridImage').mouseover(function() {
    $('#overlay-'+$(this).attr('id')).css({
        'top': $(this).position().top, 
        'left': $(this).position().left,
        'right': $(this).position().left, 
        'bottom': $(this).position().bottom,
        'width': $(this).width(),
        'height': $(this).height()
    }).fadeIn(150);
});
$('.gridImage').mouseout(function() {
    $('#overlay-'+$(this).attr('id')).fadeOut(150);
});

По сути, этот код обнаруживает, когда вы наводите курсор на изображение, он находит правый (div) оверлей, основанный на том, какое изображение он (id), и ударяет его поверх изображения. Теперь, поскольку div полностью покрывает изображение, вызывается mouseout и вызывается оверлей.

Довольно просто, это делает его таким, что я наводил мышь на изображение, он исчезает в оверлее, а затем исчезает - в основном это мерцает

Как я могу это исправить?