Использование CSS для увеличения изображения при наведении, но для сохранения размера изображения. Я получил его на работу, но он показывает только один угол изображения

Question

У меня есть изображение в верхней части веб-страницы. Я сделал так, чтобы при наведении курсора на изображение оно слегка увеличивалось. Однако при этом я испортил что-то, из-за чего на изображении отображается только одна часть, независимо от того, включен ли указатель мыши или нет. Я пытался удалить части кода, который я добавил, но не могу исправить это, не удалив полностью анимацию при наведении. Я также попытался изменить поля, отступы и позицию. Я использую Bootstrap 4, если это имеет значение. Я уверен, что это что-то простое, я просто не могу понять, что нужно изменить.

Вот ссылка на Codepen: https://codepen.io/amandathedev/pen/zyEyze

Вот соответствующая часть CSS:

.imgBox {
float: left;
position: relative;
width: 640px;
height: 360px;
margin: 0 auto;
/* justify-content: center;
display: inline-block; */
overflow: hidden;
}

.imgCard {
    position: absolute;
    top: 0;
    left: 0;
}

.imgCard img {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}

.imgBox:hover .imgCard img {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

Answer 1

Глядя на ваш пример кода на codepen, решение выглядит так, чтобы ширина img составляла 100%. Итак, в вашем примере вы бы сделали что-то вроде:

.photo {
    width:100%
}

Однако это обрезает нижнюю часть изображения. Вам нужно будет отрегулировать высоту imgBox, который содержит imgCard. В настоящее время он установлен на 360px. Из-за того, как написан ваш пример, вам, вероятно, будет лучше выбрать число, чтобы полученное изображение имело такое же соотношение сторон, что и исходное изображение (играя с ним, 478px выглядит как магическое число, которое нужно показать все изображение).

Answer 2

Вам нужно установить transform-origin в центр, чтобы он масштабировался от центра, так что ваш css должен выглядеть так:

.. другие css

.imgBox:hover .imgCard img {
    transform: scale(1.05);
    transform-origin: center;
    -webkit-transform: scale(1.05);
}