Расширяющиеся при наведении карты, вызывающие вертикальный сдвиг соседей. ⇐ CSS

[Anonymous]

Я создаю сетку 3 x n с помощью CSS попутного ветра.
Каждый элемент выполнен в классическом стиле информационной карточки.
Когда я навожу курсор на карточку, я хочу, чтобы она расширялась и выглядела так, будто она немного выскакивает. бит.
Проблема в том, что карточки иногда расширяются при наведении на них курсора, в результате чего остальные элементы под ними в сетке смещаются вниз, чтобы приспособиться к этому.Я хочу, чтобы сетка карточек не затрагивалась, а увеличивалась только выбранная карточка.

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

import React from 'react';
// Data
import { boltOnServicesArray } from '../../utils/data/InfoPageData';

function OptionalServicesContainer({ setSelectedService }) {
return (



Enhance Your{' '}
Website with Our Services


Explore our add-on services designed to enhance your website's
functionality and customer experience.





{boltOnServicesArray.map((service) => (

 setSelectedService(s)}
/>

))}




);
}

const ServiceCard = ({ service, onClick }) => (
 onClick(service)}
>


{service.icon}

{service.price}


{service.title}


{service.description}


);

export default OptionalServicesContainer;

Я пробовал добавить элемент div в качестве родительского элемента к каждой карточке, а затем, когда вы наводите курсор на карту, он позиционируется абсолютно, поэтому я думал, что он будет расти поверх карточек и ни на что не повлияет, но начиная с той же позиции, используя div

Подробнее здесь: https://stackoverflow.com/questions/792 ... neighbours