Hover-эффект при наведении курсора на картинку

Моё версталово проходит весьма плодотворно и в этот раз я научился применять эффекты при наведении курсора на изображение, как это часто встречается на всякого рода витринах товаров. Сразу оговорюсь, что этот комплексный пример требует подключения фронт-енд-фреймворка Bootstrap и JavaScript-библиотеки jQuery.

Используя CSS-классы из Bootstrap 4 я создаю так называемую карту. Класс img-fluid элемента img означает, что размер картинки будет изменяться в зависимости от доступного на экране места. Блок класса card-img-overlay содержит то, что будет выводиться при наведении курсора.

<div class="card">
    <img src="http://cpa-master.com/logo.png" class="img-fluid card-img" alt="Альтернативный текст" />
    <div class="card-img-overlay">
        <h4 class="card-title">Заголовок картинки</h4>
        <p>Тут ещё абзац с каким-то текстом.</p>
    </div>
</div>

При загрузке страницы оверлей не должен быть видным, что мы прописываем в стилях CSS (display: none;). Кроме того, мы прописываем цвет подсветки при наведении (background: rgba(0,0,0,0.4);).

.card {
    position: relative;
    width: 400px;
}

.card-img-overlay {
    display: none;
    position: absolute;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    color: #fff !important;
}

Следующий код JavaScript при загрузке страницы инициализирует действия, которые будут происходить при наведении курсора на картинку. Я терпеть не могу анонимные функции, поэтому везьде передаю название функций. Функции imgTitleFadeIn и imgTitleFadeOut отвечают за появление и удаление эффекта. Обе функции прикручиваются к селектору div-блок класса карта ($('div.card')).

$(initImageHover);

function initImageHover() { 
    $('div.card').hover(imgTitleFadeIn, imgTitleFadeOut);
}

function imgTitleFadeIn() {
    $(this).find('.card-img-overlay').fadeIn(250);
}
 
function imgTitleFadeOut() {
    $(this).find('.card-img-overlay').fadeOut(250);
}

В деле всё это выглядит таким образом (наведите курсор мышки на картинку, чтобы увидеть эффект):

В конце поста предлагаю скачать этот пример и испытать на своём компьютере.