Как увеличить изображение при наведении через css?
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> |
@fidel
Для того, чтобы увеличить изображение при наведении курсора мыши на него через CSS, можно использовать псевдокласс :hover в комбинации с свойством transform.
Вот пример кода, который позволит увеличить изображение в 1.2 раза при наведении на него курсора мыши:
1 2 3 |
img:hover { transform: scale(1.2); } |
В данном примере мы используем селектор img, чтобы выбрать все изображения на странице, а затем добавляем псевдокласс :hover, чтобы задать стиль для состояния, когда курсор находится над изображением.
С помощью свойства transform: scale(1.2) мы устанавливаем масштабирование изображения на 120% от исходного размера при наведении на него курсора мыши.
Обратите внимание, что при использовании свойства transform необходимо учитывать, что оно может изменить расположение элемента на странице, поэтому может потребоваться корректировка позиционирования или размеров других элементов на странице.