Class | Properties |
---|---|
.scale-95 | transform: scale(.95); |
.scale-100 | transform: scale(100); |
.scale-105 | transform: scale(1.05); |
.scale-110 | transform: scale(1.1); |
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.