Как сделать так, чтоб при наведении увеличивался масштаб изображения, НО при этом сам элемент не выходил за назначенные ему границы?

Question

Как сделать так, чтоб при наведении увеличивался масштаб изображения, НО при этом сам элемент по прежнему оставался 300рх и не выходил за назначенные ему границы?

Почему в данном случае не действует ни width, ни overflow?

.photo {
  width: 300px;
}

img {
  max-width: 100%;
  outline: 1px solid black;
}

img:hover {
  transform: scale(1.5, 1.5);
  width: 300px;
  overflow: hidden;
}

<div class="photo"><img src="https://i.postimg.cc/FRWfmD7p/3fb60ef7936531a414af177f842a18f6.jpg" alt=""></div>

Answer 1

не тому элементу установлен overflow, это свойство надо устанавливать контейнеру, а не содержимому.

.photo {
  width: 300px;
  overflow: hidden;
}

img {
  max-width: 100%;
  outline: 1px solid black;
}

img:hover {
  transform: scale(1.5, 1.5);
  width: 300px;
}

<div class="photo"><img src="https://i.postimg.cc/FRWfmD7p/3fb60ef7936531a414af177f842a18f6.jpg" alt=""></div>

БЛОГ НА HUSL

Как сделать так, чтоб при наведении увеличивался масштаб изображения, НО при этом сам элемент не выходил за назначенные ему границы?

Ответы (1 шт):