<div class="container">
  container1
</div>
<span>span</span>
<div class="container2">
  container2
</div>
:root {
  --scale: 1;
  --width: 80px;
  --height: 200px;
}
div {
  display: inline-block;
}
.container {
  width: calc(var(--scale, 1) * var(--width, 80px));
  height: calc(var(--scale, 1) * var(--height, 200px));
  border: 1px solid #000;
  transition: all 1s;
  background-color: yellowgreen;
  &:hover{
    --scale: 2;
  }
  &:active{
    --scale: 0.5;
  }
}

.container2 {
  width: calc(var(--scale) * var(--width));
  height: calc(var(--scale) * var(--height));
  border: 1px solid #000;
  transition: all 1s;
  background-color: blue;
  &:hover{
    transform: scale(1.4);
  }
  &:active{
    transform: scale(0.5);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.