CODEWITHSUNDEEP
cssanimationhovertailwind-cssgroup
THTCN
THTCN

Reputation: 11

I want hover card to animation for images use css tailwind but it don't work

<html>

<body>
  <div class="group card my-14 mx-3 w-80 h-100 bg-gray-800 rounded-xl text-white p-5 cursor-pointer">
    <div class=" flex justify-between items-center text-2xl ">
      <i class='bx bx-heart'></i>
      <i class='bx bx-cart-alt'></i>
    </div>
    <div class="w-11/12 ml-2.5 group-hover:text-white group-hover:-rotate-20">
      <img class="object-cover w-full h-full" src="./Images/Jordan.png" id="bannerImage" alt="">
    </div>
    <div class="text-center uppercase text-xl text-green-600">
      Jordan 1 <br>
      $299
    </div>

  </div>
</body>

</html>

Explain why Styling based on parent state doesn't work. ...................................

Upvotes: 1

Views: 191

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14313

Tailwind doesn't have -rotate-20 utility class. Change it to one of known or use arbitrary value like group-hover:-rotate-[20deg]

Upvotes: 1

Related Questions