# Scale

> Utilities for scaling elements with transforms.

Source: https://www.zenplates.co/documentation/utilities/scale (Utilities › Effects)

| Class        | Properties                |
| ------------ | ------------------------- |
| `.scale-95`  | `transform: scale(.95);`  |
| `.scale-100` | `transform: scale(1);`    |
| `.scale-105` | `transform: scale(1.05);` |
| `.scale-110` | `transform: scale(1.1);`  |

## Usage

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

```html
<div class="avatar scale-95">
  <img class="avatar-img" src="..." alt="..." />
</div>
<div class="avatar scale-100">
  <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, no responsive or 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](https://www.zenplates.co/documentation/customization/using-sass-source-files):

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

### Hover-state

To include hover-state variants like `.hover:scale-105`, add `"scale"` to the `$hover-variants` variable when recompiling your CSS:

```scss
$hover-variants: (
  // ...
  "scale",
);
```