CODEWITHSUNDEEP
angularimagehoverscaletailwind-css
Allison Barnett
Allison Barnett

Reputation: 39

Hover:scale-125 not working on images with Tailwind CSS

I have a row of images that I want to enlarge as I hover over them. The documentation seems pretty simple, but it's not working for some reason. This is what I'm doing on each image:

        class="inline h-64 hover:scale-125"
        [src]="'assets/images/teaching/custom-craftsmanship.jpg'"
      />

What am I doing wrong?

Upvotes: 2

Views: 5772

Answers (3)

Papazy
Papazy

Reputation: 41

I had the same problem, and then I noticed an issue with my code:

<div>
 <a href="#home" class="hover:scale-105 transition-all">BERANDA</a>
<div>

I realized that I needed to add the flex class for the animation to work properly.

After updating the code like this:

<div class="flex items-center gap-4">
 <a href="#home" class="hover:scale-105 transition-all">BERANDA</a>
<div>

it worked for me.

Upvotes: 0

Jason Lim Ji Chen
Jason Lim Ji Chen

Reputation: 202

In order to fit in your scaled image within a fixed frame, you have to add "overflow-hidden" to your parent element.

An example below shows an image is scaled to 110% during hover and still fit within the parent frame.

<div className="overflow-hidden">
   <img className="... hover:scale-110">
      ...
   </img>
</div>

Upvotes: 0

DavidWebb
DavidWebb

Reputation: 63

you need to add the "transform" class

Upvotes: 3

Related Questions