Hover:scale-125 不适用于具有 Tailwind CSS 的图像

Question

我有一排图像，当我将鼠标悬停在它们上方时，我想放大它们。该文档看起来很简单，但由于某种原因它不起作用。这就是我在每张图像上所做的：

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

我做错了什么？

Answer 1

3
投票

你需要添加“transform”类

Answer 2

为了使缩放后的图像适合固定框架，您必须向父元素添加“overflow-hidden”。

下面的示例显示图像在悬停期间缩放至 110%，并且仍然适合父框架。

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

Answer 3

我遇到了同样的问题，然后我注意到我的代码有问题：

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

我意识到我需要添加 Flex 类才能使动画正常工作。

更新代码后：

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

它对我有用。