Как увеличить картинку при наведении?
За изменение масштаба изображения отвечает свойство 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
Прочитав эту статью, вы узнаете, как сделать так, чтобы при наведении мышки, изображение плавно увеличивалось. И не просто увеличивалось в размерах, а чтобы создавался эффект зума.
Мы будем использовать только html и css. JavaScript нам не понадобится.
Итак, напишем немного html кода. Мы поместим нашу картинку img в блок с классом photo
Здесь я не добавляю какие-либо дополнительные классы к картинке, чтобы не запутывать вас при объяснении. Но на своем проекте, лучше будет, если вы тегу img добавите какой-то свой класс и будете обращаться к картинке по этому классу.
Далее перейдем к css. С помощью hover мы сможем менять значения у свойств.
В данном случае, мы увеличим картинку, изменив для нее свойство transform. Запишем это в коде:
.photo:hover img
Здесь мы прописали следующую инструкцию: при наведении (hover) на блок, в котором содержится картинка (класс photo), мы меняем значение transform у самой картинки (img).
Значение scale — это на сколько мы масштабируем картинку. По умолчанию идет значение 1.
Чтобы добавить немного плавности переходу, добавим свойство transition для тега img
Здесь мы указали, какое свойство будем меняться и сколько будет длиться переход.
Теперь картинка у нас увеличивается плавно, но она выходит за пределы свой условной рамки. Чтобы это исправить, нам нужно добавить к блоку photo свойство overflow со значением hidden
.photo
Мы, как бы, говорим: все что выходит за пределы этого блока — скрываем.
Но это еще не все, ведь браузер не знает, какой размер у нашего блока — поэтому нам нужно его задать. А для картинки прописать, чтобы она занимала всю ширину и высоту блока photo.
В итоге получится вот такой код:
.photo < width: 400px; height: 350px; overflow: hidden; >img < transition: transform 0.25s; >.photo:hover img
Надеюсь вы поняли принцип, по которому можно делать увеличение картинки при ховере. Я прикреплю наше видео, где еще раз подробно все объясняю.
Увеличение картинки при нажатии
Необходимо, чтобы при нажатии на картинку(уменьшенную версию) на экране по центру появлялась её увеличенная версия. Проблема в том, что если картинок много и открывается картинка внизу, то по закрытии картинки происходит переход вверх страницы. Как можно это реализовать без перехода. Мне посоветовали использовать checkbox , но я не особо понимаю, как через них делать.
.pictures < -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; margin-bottom: -1em; >a < display: inline-block; >img < display: block; width: 100%; margin-bottom: 1em; >.full < display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; padding: 8%; background: #CCC center no-repeat; background: rgba(0, 0, 0, 0.5) center no-repeat; background-size: contain; background-origin: content-box; >.full:target
Как увеличить картинку при нажатии в html или css?
Привет народ
Стало интересно как сделать так чтобы при нажатии на картинку она увеличивалась и фон стал черным или что то как у facebook или vk.com вот примерно как нужно prntscr.com/azilq1 дайте совет может есть готовое решение
- Вопрос задан более трёх лет назад
- 17339 просмотров
Комментировать
Решения вопроса 1
Хотя конечно calc() это не совсем верный подход. Но на флексы можете сами переделать. Главное общий принцип иллюстрирует.
Ответ написан более трёх лет назад
Нравится 2 4 комментария