Zoom

import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign, TargetingSpecificStates, UsingACustomValue } from "@/components/content.tsx";

export const title = "zoom"; export const description = "Utilities for scaling elements using zoom.";

", "zoom: \%;"], ["zoom-(\)", "zoom: var(\);"], ["zoom-[\]", "zoom: \;"], ]} />

Examples¶

Basic example¶

Use zoom-<number> utilities like zoom-75 and zoom-125 to scale an element using the CSS zoom property:

<!-- [!code classes:zoom-75,zoom-100,zoom-125] -->
<div class="zoom-75 ...">
  <!-- ... -->
</div>
<div class="zoom-100 ...">
  <!-- ... -->
</div>
<div class="zoom-125 ...">
  <!-- ... -->
</div>

Zoom

Examples¶

Basic example¶

Using a custom value¶

Applying on hover¶

Responsive design¶