<div class="thing">Hover me</div>
:root {
  --scale: 3;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.thing {
  --scale: 1;
  background: #f8a100;
  display: grid;
  height: 100px;
  place-items: center;
  transform: scale(var(--scale));
  transition: all 0.5s;
  width: 100px;
}

.thing:hover {
  --scale: 3;
  cursor: pointer;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.