Как сделать чтобы картинка увеличивалась при наведении css
Перейти к содержимому

Как сделать чтобы картинка увеличивалась при наведении css

  • автор:

Слегка увеличить объект при наведении

Слегка увеличивать объект при наведении можно через параметр scale() свойства transform .

.element:hover < transform: scale(1.1); >

Также можно указать свойство transition, чтобы увеличение объекта было плавным (анимированным).

.element < /* … */ transition: transform .2s; >

Обновлено: 01 ноября 2020

Комментарии

Авторизуйтесь, чтобы добавлять комментарии

  • Анимировать объект
  • Анимация поворачивающейся карты
  • Слегка увеличить объект при наведении
  • Непрерывная анимация (бесконечное повторение анимации)
  • Пошаговая анимация
  • Вращающийся объект (текст, картинка)
  • Вращение объекта вокруг указанной оси

Как сделать так, чтобы при наведении курсора картинка увеличивалась, но не выходила за границы соседних?

Коллеги, пожалуйста помогите! На сайте должна располагаться матрица из фотографий 3 на 3 и анимация, при наведении курсора на каждую из них, увеличивает слегка. Но при увеличении, увеличивающаяся картинка своими краями залезает на соседние. Как сделать, чтобы она как бы увеличивалась внутри?

 
#conteiner < position: absolute; margin: 25%; margin-top: 30px; flex-direction: row; >.kar1:hover < transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); >.kar1
  • Вопрос задан более трёх лет назад
  • 4175 просмотров

Комментировать

Решения вопроса 1

ovvivus

Для этого необходимо поместить каждое изображение в блок, и задать этому блоку overflow: hidden

Ответ написан более трёх лет назад

Нравится 2 1 комментарий

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

f53b60a1180746e1a1f99775a475a5b8.jpg

Привет!
Как сделать такое увеличение картинки при наведении, как на макете? Нужно, чтобы картинка увеличивалась вширь и ввысь, но при этом ее нижний край оставался на одном уровне с другими картинками и не сдвигался.
При применении scale по Y картинка увеличивается вверх и вниз, и соответственно ее нижний край сдвигается и не находится на одном уровне с другими картинками.

Update: Вдруг кому пригодится, самое простое решение — использовать свойство tranform-origin: bottom.
Трансформация по оси y происходит относительно нижней стороны элемента.

img < -webkit-transform-origin: bottom; transform: scale(0.9); >img:hover
  • Вопрос задан более трёх лет назад
  • 1278 просмотров

Комментировать

Решения вопроса 2

pm_wanderer

Алексей Струков @pm_wanderer

junior-HTML

можно попробовать сделать картинки абсолютно позиционированными c top: 0 и bottom: 0, и при ховере увеличивать свойство top до -30 например.
Еще можно сделать все картинки флекс итемами и на ховере делать margin-top: -20px и увеличивать ширину.
Предварительно у флекс итемов поставить например transition: all 0.5s linear;

Ответ написан более трёх лет назад

Комментировать

Нравится 3 Комментировать

Плавное увеличение изображения при наведении на чистом CSS3

Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.

И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это делать.

Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.

Плавное увеличение картинки при наведении только на CSS3.

Демо

Html

Для начала нам нужно подготовить не сложную разметку html для наших картинок, в данном случае у нас их будет 3.

Как видите, что все картинки имеют класс image к которому мы, собственно, и будем задавать параметры.

CSS

А вот как выглядят стили:

.image

Мы создали обычный блок размером 380 на 250 пикселей. Это блок должен быть такого же размера как и изображение (в нашем случае 380 на 250). Соответственно, если у Вас картинка будет большего или меньшего размера, размер блока .image делаем такого же размера как и картинка.

И обязательно ставим правило overflow:hidden; Оно нужно для того, чтобы наше изображение не выходило за рамки блока при увеличении.

Теперь задаём правила для самих изображений:

.image img < -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; >.image img:hover

Анимация происходит с помощью параметра transition и transform в CSS3. На всю анимацию у нас уходит одна секунда. Если Вы хотите, чтобы картинка быстрее увеличивалась, уменьшите это значение.

В демо картинка увеличивается 1.1 раза. Если поставить значение 2, то картинка увеличится в два раза и так далее.

Демо

Вот и всё, друзья. Как и обещал, что урок будет очень простым. Надеюсь Вам понравился этот простой эффект для картинок. До скорых встреч.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *