The issue Im facing here is I have many components in a page and this code is a particular component so when I hover any card of this component the card is expanding but the below components of page are also moving down when i hover on any card so the whole layout is shifting down.

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 (
    <div
      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 src={image} className="w-16 h-16 mb-4" />
      <h2 className={`font-Poppins-Medium text-xl mb-2 ${color}`}>{title}</h2>
      <div
        className={`transition-all duration-0 ease-in ${
          isHovered ? "max-h-20 opacity-100" : "h-0 opacity-0"
        }`}
      >
        <p className="text-beetxt text-base font-Poppins-Regular py-4 -my-4">
          {description}
        </p>
      </div>
    </div>
  );
};

export default function Demo() {
  const cards = [
    {
      title: (
        <>
          Creativity With <br /> 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 <br /> 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 <br />
          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 <br />
          Action:
        </>
      ),
      description:
        "Your vision is our mission. We partner with you to create strategies that elevate your brand.",
      image: card4,
      color: "text-[#3BCDF6]",
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-36 bg-beebg px-24 items-start py-24">
      {cards.map((card, index) => (
        <Card key={index} {...card} index={index} />
      ))}
    </div>
  );
}

I tried many other position properties and when I tried to use position:fixed everything disappears .

The issue Im facing here is I have many components in a page and this code is a particular component so when I hover any card of this component the card is expanding but the below components of page are also moving down when i hover on any card so the whole layout is shifting down.

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 (
    <div
      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 src={image} className="w-16 h-16 mb-4" />
      <h2 className={`font-Poppins-Medium text-xl mb-2 ${color}`}>{title}</h2>
      <div
        className={`transition-all duration-0 ease-in ${
          isHovered ? "max-h-20 opacity-100" : "h-0 opacity-0"
        }`}
      >
        <p className="text-beetxt text-base font-Poppins-Regular py-4 -my-4">
          {description}
        </p>
      </div>
    </div>
  );
};

export default function Demo() {
  const cards = [
    {
      title: (
        <>
          Creativity With <br /> 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 <br /> 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 <br />
          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 <br />
          Action:
        </>
      ),
      description:
        "Your vision is our mission. We partner with you to create strategies that elevate your brand.",
      image: card4,
      color: "text-[#3BCDF6]",
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-36 bg-beebg px-24 items-start py-24">
      {cards.map((card, index) => (
        <Card key={index} {...card} index={index} />
      ))}
    </div>
  );
}

I tried many other position properties and when I tried to use position:fixed everything disappears .

• javascript
• html
• css
• reactjs
• tailwind-css

1 Answer 1

You can try to use position absolute.

Add position relative to parent container

<div style={{position: 'relative'}}
      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)}
    >

And after you can add position absolute to block

<div style={{bottom: 0, left: 0, zIndex: 99}}
        className={`transition-all duration-0 ease-in ${
          isHovered ? "max-h-20 opacity-100" : "h-0 opacity-0"
        }`}
      >

With positioning: {bottom: 0, left: 0, zIndex: 99 )}

Position fixed should be also work if you set z-index style, but you should correctly set positioning params