How to do scaling effect on hover in CSS?

In CSS, the `transform` property together with `scale` function and hover pseudo-class can be used to create a scaling effect. Here’s a simple example:

Consider an element with class “scale-on-hover”:

```

Hover over me

```

You can create a scaling effect that will be activated when hovered over with CSS like so:

```
.scale-on-hover { /* Apply a transition to the transform property to animate the scaling */ transition: transform 0.5s;

/* This is optional, but useful: keep the element the same size in layout, to prevent surrounding content from reflowing in response to the scale transformation */ backface-visibility: hidden; }

.scale-on-hover:hover { /* Scale the element to 150% its original size */ transform: scale(1.5);
}
```

Now when you hover over the element with the “scale-on-hover” class, it will scale up to 150% of its original size over the course of half a second. This can be a pleasant, eye-catching effect when used sparingly.

Note: Be aware that the scaling effect can make text unclear to read if it’s applied to an element containing text, particularly when scaling down.