Can't apply on hover effect after an animation - React

Question

first of all, good evening. I'm creating an online store for mmo services and I had the idea of doing this:

Cards image

These cards enter in an animation from left to right appearing one after the other. Pretty cool in my eyes, but the problem comes with the final state of the cards. I want them to scale 10% on hover, but I can't seem to make it work. I tried adding hover:scale-110 to the correspondent className but it didn't work.

I'd like to clarify that this is my first development.

Cards code:

{/* Home third section | content */}
            <div ref={sectionRef} className="bg-purple border-t-4 border-white h-auto min-h-[32rem] md:min-h-[36.8rem] xl:min-h-[41.4rem] border-b-4 pb-24">
                <h2 className="text-white text-8xl font-extrabold text-center mt-24 mb-32">Why Choose Us?</h2>
                <div className="flex justify-around items-center mt-16">
                    {[
                        { text: 'Efficiency', imageUrl: card1 },
                        { text: 'Highest Value', imageUrl: card2 },
                        { text: 'Reliability', imageUrl: card3 },
                        { text: 'Well-Being', imageUrl: card4 },
                    ].map((card, index) => (
                        <div
                            key={index}
                            className="card bg-cover bg-center bg-no-repeat rounded-lg w-64 h-96 md:w-72 md:h-[28rem] lg:w-80 lg:h-[32rem] opacity-0 transform transition-transform duration-800 ease-in-out hover:scale-110"
                            style={{
                                backgroundImage: `url(${card.imageUrl})`,
                            }}
                        >
                            <div className="text-white p-4">
                                <h3 className="text-lg font-bold">{card.text}</h3>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

Some index.css lines I have that are related to this:

@keyframes fadeInLeft {
  from {
      opacity: 0;
      transform: translateX(-50%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.card {
  transition: transform 0.5s ease-in-out; /* Smooth scaling transition */
}

.card:hover {
  transform: scale(1.1); /* Scale up the card by 10% */
}

I didn't try the CSS property for the .card class at the same time as the className hover:scale-110. I tried them separately but I included both to state that I've tried both ways.

In advance, thank you very much for any help!

I explained what I tried earlier!

Answer 1

change css code to this and it should work.

.card {
    animation: fadeInLeft 1s forwards;
    transition: scale 0.5s ease-in-out; /* Smooth scaling transition */
}

.card:hover {
    /* transform: scale(1.1); !* Scale up the card by 10% *!*/
    scale: 1.1;
}

you cannot apply transform to a element in 2 different places, just one of them works. which you did once in animation key frame. there are other ways to fix it, but this one is most easiest in this case.