Эффект плавного увеличения картинки с помощью CSS

Возможно, вы видели такой эффект на сайте, когда при наведении на картинку, она начинала плавно увеличиваться в размерах. Реализовать это несложно. Предположим, у нас есть такой HTML код: 

<div class="parent">
<img src="/изображение.png">
</div>

Тогда CSS код будет следующим:

.parent {
  overflow: hidden;
}

.parent img {
  transition: all 3s ease-out;
}

.parent img:hover {
  transform: scale(1.1);
}

Контейнер .parent служит здесь с той целью, чтобы при увеличении изображения, оно не выходило за пределы контейнера.