Дмитрий

Слова, часто используемые в CSS-классах: https://github.com/yoksel/common-words

Название класса должно адекватно описывать элемент или блок, для которого класс вводится. Изучайте БЭМ, это лучший подход к именованию классов.

https://ganlanyuan.github.io/tiny-slider/demo/
Весьма функциональный слайдер на ванилле.

. row и .col - это абстрактные сущности, которые призваны создать сетку, каркас страницы. Они не имеют никакой семантики или смысловой нагрузки, это просто структурные элементы. Внутри них может быть всё, что угодно - и если это логично сверстать на флексах, то это нужно верстать на флексах.
То есть, если внутри условного col-8 нужно сделать ещё три колонки, внутри которых будет какой-то другой контент, то логично использовать внутри еще один .row и .col-4, так как здесь речь идёт о сетке, каркасе. Если же внутри будет какой-то кастомный блок/элемент, типа меню или чего угодно ещё, где нужны все достижения Flexbox - смело можно использовать флексы, никакого говнокода тут не будет и близко.

$(".gallery__item div").on({
    mouseenter: function () {
        $(this).text($(this).data('text'));
    },
    mouseleave: function () {
        $(this).text("");
    }
});

Ну и сам текст стилизовать - добавить z-index для отображения сверху оверлея, позиционирование и так далее.
Текст лучше заключить во внутренний селектор и работать с ним.

"Налезать", а не "налазить".
А по сабжу, одно из решений: нужно блоку, который появляется по ховеру (.card-description в вашем случае) применить position:absolute и соответствующие стили. В этом случае блок не будет сдвигать нижние карточки.