Как увеличить изображение при наведении через css?

Пользователь

от fidel , в категории: HTML/CSS , 2 года назад

Как увеличить изображение при наведении через css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от madelyn_hintz , 2 года назад

@fidel  Увеличить изображение при наведении через css можно так:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .photo {
        width: 400px;
        overflow: hidden;
      }
      img {
        transition: transform 1s;
      }
      .photo:hover img {
        transform: scale(1.2);
      }
    </style>
  </head>
  <body>
    <div class="photo">
      <img src="image/11.jpeg" />
    </div>
  </body>
</html>

Пользователь

от william_stoltenberg , год назад

@fidel 

Для того, чтобы увеличить изображение при наведении курсора мыши на него через CSS, можно использовать псевдокласс :hover в комбинации с свойством transform.


Вот пример кода, который позволит увеличить изображение в 1.2 раза при наведении на него курсора мыши:

1
2
3
img:hover {
  transform: scale(1.2);
}


В данном примере мы используем селектор img, чтобы выбрать все изображения на странице, а затем добавляем псевдокласс :hover, чтобы задать стиль для состояния, когда курсор находится над изображением.


С помощью свойства transform: scale(1.2) мы устанавливаем масштабирование изображения на 120% от исходного размера при наведении на него курсора мыши.


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