Как вычислить значения, на которые был изменен масштаб?

Для вычисления значений, на которые был изменен масштаб, можно воспользоваться формулой:

новое значение = старое значение * (новый масштаб / старый масштаб)

Чтобы блок с классом "card" изменял свой размер соответственно уменьшению масштаба и избегал появления зеленого фона от блока "container", можно использовать следующий CSS-код:

.container {
  background-color: green;
  padding: 10px;
}

.card {
  transform-origin: top left;
  transition: transform 0.3s;
}

.card:hover {
  transform: scale(0.8);
}

.card-content {
  padding: 10px;
  background-color: white;
}

.card-content:hover {
  background-color: white;
}

.card:hover .card-content {
  background-color: white;
}

Таким образом, при наведении курсора на блок с классом "card" он будет уменьшаться в размере до 80%, а фон блока "container" не будет виден.