Предотвращение перемещения находящейся карты по соседним элементам в CSS ⇐ CSS

[Anonymous]

Вот HTML-код структуры. Я использую .tpl. Функциональность заключается в том, что когда пользователь наводит курсор на карту, он отображает тело карты. Проблема в том, что наведенная карточка перемещает следующую строку. Я думаю, это происходит потому, что я использую flex в карточном контейнере.

Код: Выделить всё

.main-container {
width: 100%;
min-height: 100vh;
height: auto;
}

.container {
padding: 2rem 4rem;
background-color: #edf0ff;
border-radius: 20px;
width: 100%;
height: 700px;
overflow-y: auto;
scrollbar-gutter: stable;
}

.card-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: flex-start;
position: relative;
}

.card {
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease-in-out;
flex: 0 0 20rem;
}

.card-body {
display: none;
opacity: 0;
transition: opacity 0.3s ease-in-out;
pointer-events: none;
font-family: "Poppins", sans-serif;
}

.card-img-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

.card-img-overlay h5 {
font-size: 1.5rem;
}

.card-img-overlay i {
font-size: 1.5rem;
}

.card:hover .card-body {
display: block;
opacity: 1;
pointer-events: auto;
z-index: 1;
}

.card:hover {
position: relative;
z-index: 1;
transform: translate3D(0, -1px, 0) scale(1.1);
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.card:hover .card-img-overlay {
display: none;
}

Код: Выделить всё

Digital Project Showcase



220 out of 400 projects found for Selected filters > “Node.js” > “1st
Year”



[i]          src="https://steelcase-res.cloudinary.com/image/upload/c_limit,dpr_auto,q_70,h_1024
class="card-img-top"
alt="..."
/>

title

[/i]



title

Customizo is an innovative e-commerce platform designed to transform
the way people shop for clothes. By offering a ....

Team Lead: Thanvi Pujari

E-Commerce
L-2: Figma | Node | React

Вот как он выглядит сейчас.
Вот как он должен себя вести

Подробнее здесь: https://stackoverflow.com/questions/786 ... nts-in-css