Scale transforms

Usage

Use .scale-{percentage} to scale an element by a given percentage.

.scale-95

.scale-0

.scale-105

.scale-110

<div class="avatar scale-95">
  <img class="avatar-img" src="..." alt="...">
</div>
<div class="avatar scale-0">
  <img class="avatar-img" src="..." alt="...">
</div>
<div class="avatar scale-105">
  <img class="avatar-img" src="..." alt="...">
</div>
<div class="avatar scale-110">
  <img class="avatar-img" src="..." alt="...">
</div>

Variants

By default, only hover-state variants are generated for scale utilities.

Responsive

To include responsive variants like .md:scale-105, add "scale" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "scale",
);

Hover-state

To control the text decoration of an element on hover, add the hover: prefix to any existing text color utility.

For example, use hover:scale-105 to apply the scale-105 utility when the mouse is hovered over the element.