Как предотвратить смещение макета в реакции ⇐ Javascript

[Anonymous]

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

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

import React, { useState } from "react";
import card1 from "../assets/Logos/card1.gif";
import card2 from "../assets/Logos/card2.gif";
import card3 from "../assets/Logos/card3.gif";
import card4 from "../assets/Logos/card4.gif";

const Card = ({ image, title, description, color, index }) => {
const [isHovered, setIsHovered] = useState(false);

// Dynamically determine the translate-y value based on the card index
const translateClass = index % 2 === 0 ? "-translate-y-8" : "translate-y-8";

return (
className={`bg-beeblack p-6 rounded-3xl flex flex-col hover:h-80 transition-all duration-800 ease-in transform ${translateClass} hover:translate-y-0`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
[img]{image} className=[/img]
{title}


{description}


);
};

export default function Demo() {
const cards = [
{
title: (

Creativity With
Purpose:

),
description:
"We bring ideas to life, crafting innovative and meaningful narratives that resonate with your audience.",
image: card1,
color: "text-[#7670EA]",
},
{
title: (

Client-Service
Focused:

),
description:
"Your vision is our mission. We partner with you to create strategies that elevate your brand.",
image: card2,
color: "text-[#F43C3C]",
},
{
title: (

Commitment

to Excellence:

),
description:
"Your vision is our mission. We partner with you to create strategies that elevate your brand.",
image: card3,
color: "text-[#58BC83]",
},
{
title: (

Integrity in

Action:

),
description:
"Your vision is our mission. We partner with you to create strategies that elevate your brand.",
image: card4,
color: "text-[#3BCDF6]",
},
];

return (

{cards.map((card, index) => (

))}

);
}

Я пробовал много других свойств позиции, и когда я попытался использовать position:fixed, все исчезло.

Подробнее здесь: https://stackoverflow.com/questions/793 ... g-in-react