Блог

Главная - Вопросы по программированию - Как я могу масштабировать изображение при наведении курсора внутри контейнера?

Как я могу масштабировать изображение при наведении курсора внутри контейнера?

#javascript #css

Вопрос:

масштаб изображения

Я хочу, чтобы изображение масштабировалось, но не контейнер.

     <div class="container">
     <img class="img" src="" />
   </div>

Комментарии:

1. на img наведите курсор img:hover { transform: scale(1.1); } , дайте переход для плавности. Попробуй и дай мне знать. Тогда я тоже выставлю это в качестве ответа.

Ответ №1:

Добавьте максимальную ширину для container и установите transform:scale для изображения при наведении и установите overflow:hidden для контейнера, чтобы масштабированное изображение не выходило из контейнера . Также добавьте transition для крутых эффектов.

 .container {
  position: relative;
  overflow: hidden;
  max-width: 300px;
  z-index: 1;
}
.container::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #e5e5e5;
  opacity: 0;
  transition: .5s ease all;
}
img {transition: .5s ease all; width: 100%; object-fit:cover;}
.container:hover img {
  transform: scale(1.1);
}

.container:hover::after {opacity: 0.2;} 
  <div class="container">
     <img class="img" src="https://picsum.photos/id/237/200/300" />
   </div>

Добавьте псевдоэлемент, подобный ::before или ::after для эффекта ovelay, и отобразите его видимость при наведении

Метки: