Expanding when hover cards causing a vertical shift of its neighbours [closed]

Im making a 3 x n grid using tailwind CSS.Each item is a classic info card style.When i hover over a card, i want it to expand and look like its popping out a little bit.

The problem is the cards are sometimes expanding as they are hovered over, making the rest of the items below it on the grid get pushed down to accommodate this.

I want the grid of cards to be unaffected and just the selected card grow.

import React from 'react';// Dataimport { boltOnServicesArray } from '../../utils/data/InfoPageData';function OptionalServicesContainer({ setSelectedService }) {  return (<><header className='grid gap-2 text-center mt-10'><h1 className='text-4xl font-extrabold text-colour3'><span className='text-colour5'>Enhance</span> Your{''}<span className='text-colour5'>Website</span> with Our Services</h1><p className='text-lg max-w-2xl mx-auto mb-12'>          Explore our add-on services designed to enhance your website's          functionality and customer experience.</p></header><main role='main' className='grid'><div className='grid container mx-auto'><div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'>            {boltOnServicesArray.map((service) => (<div className='grid relative'><ServiceCard                  key={service.id}                  service={service}                  onClick={(s) => setSelectedService(s)}                /></div>            ))}</div></div></main></>  );}const ServiceCard = ({ service, onClick }) => (<article    className='group hover:absolute border cursor-pointer rounded-lg bg-white shadow-md hover:shadow-2xl transition transform hover:-translate-y-1 hover:scale-105 w-full hover:z-20'    onClick={() => onClick(service)}><div className='relative w-full h-full p-6'><div className='absolute top-4 right-4 bg-gray-100 rounded-full p-2 shadow-md text-2xl'>        {service.icon}</div><p className='text-colour5 mt-2'>{service.price}</p><div><h3 className='text-xl font-semibold text-colour3 group-hover:text-colour5 group-hover:text-2xl duration-150'>          {service.title}</h3></div><p className='text-sm text-gray-600 mt-3'>{service.description}</p></div></article>);export default OptionalServicesContainer;

I have tried adding a div as the parent to each card and then when you hover over the card it because absolutely positions so i thought it would grow over the cards and not effect anything, but starting from the same position using the div