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 .
Share Improve this question asked Jan 18 at 12:56 kiran balikaikiran balikai 153 bronze badges1 Answer
Reset to default 0You 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