Как увеличить картинку при наведении?
За изменение масштаба изображения отвечает свойство transform с функцией scale() . В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%.
Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover, как показано в примере 1.
Пример 1. Увеличение картинки
При наведении на картинку масштаб меняется мгновенно, поэтому для плавного увеличения изображения добавлено свойство transition , оно задаёт время масштабирования.
Если требуется масштабировать картинку, не увеличивая при этом её размеры, то каждое изображение надо поместить в . Для него задать свойство display со значением inline-block , чтобы стал размером с изображение; а также overflow со значением hidden , чтобы пряталось всё за пределами (пример 2).
Пример 2. Использование overflow
У изображений внутри строчно-блочных элементов снизу появляется небольшой отступ, его можно убрать с помощью свойства display со значением block .
См. также
- :focus на мобильных устройствах
- overflow
- transform
- Анимация ссылок при наведении
- Атрибут scroll
- Виды ссылок
- Всплывающая подсказка
- Высота и ширина в CSS
- Звёздные войны
- Использование :hover
- Липкое позиционирование
- Несколько псевдоэлементов
- Нормальное позиционирование
- Ориентация
- Очистка float
- Переходы с помощью :hover
- Повёрнутые рамки
- Подробнее о позиционировании
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок
- Трансформация
- Трансформация
- Трансформация в CSS
- Функции трансформации
увеличение блока при наведении курсора мыши
Мне нужно, чтобы при наведении курсора на блок он увеличивался вправо и наверх как бы. Я сделал так: css:
.test < background:gray; width:200px; height:200px; cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto; >.test:hover
TEST 
но почему-то не работает. Как сделать отступ, чтобы при наведении блок как бы увеличивался т.е как бы становился больше? Как на этой картинке. Тут 4 блока и видно насколько первый блок больше при наведении. Мне нужно прям как там, помогите если можете.
Отслеживать
задан 3 мар 2019 в 11:28
305 1 1 золотой знак 2 2 серебряных знака 10 10 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Используй transform: scale()
С помощью функции scale() свойства transform можно увеличивать и уменьшать объекты на веб-странице. Принцип работы заключается в масштабировании элемента по горизонтали и вертикали с указанием коэффициента масштабирования. Пример:
transform: scale(3); /* пропорциональное увеличение элемента в 3 раза */
transform: scale(0.5); /* пропорциональное уменьшение элемента наполовину */
Отслеживать
ответ дан 3 мар 2019 в 11:43
Nazar Sokhan Nazar Sokhan
339 1 1 серебряный знак 6 6 бронзовых знаков
@CapitalNemo я написал так вы сказали, и это помогло, но блок прозрачный, то есть как сделать перекрывание? Чтобы он перекрывал нижний блок? Спасибо.
3 мар 2019 в 11:46
Чтобы сделать один блок поверх другого нужно использовать для них обоих position: relative; z-index: 1; Вот как здесь: htmlbook.ru/css/z-index
Как изменить размер изображения при наведении курсора мыши, не затрагивая макет в CSS
Вы можете использовать CSS-свойство transform , чтобы увеличивать или уменьшать размер изображения при наведении курсора мыши, не затрагивая окружающие элементы или контент.
Давайте посмотрим следующий пример, чтобы понять, как это работает:
Читайте также
Похожие примеры:
- Как создать эффект трехмерного переворачивания при наведении курсора мыши с помощью CSS
- Как применить границу к элементу при наведении курсора мыши, не влияя на макет в CSS
- Как автоматически изменить размер изображения для размещения в контейнере div с помощью CSS
What is greater-than sign (>) selector in CSS?
The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. It looks only one level down the markup structure and not further deep down. Elements which are not the direct child of the specified parent is not selected.
Syntax:
element > element < // CSS Property >
Example-1: This example describes the greater than > selector.