Как сделать плавную анимацию при наведении css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плавная анимация градиента при наведении

Как реализовать плавную заливку градиента в 1 цвет (красный) при наведении?

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css html5 css3 css-animation или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Плавная анимация при наведении CSS или JavaScript

Плавную анимацию при наведении на объект можно сделать как с помощью JavaScript, так и с помощью CSS. На Урааа уже был материал, как сделать плавный hover на JQuery. Здесь же будет именно вариант плавной анимации на CSS.

Напомним, как это делалось на JavaScript

Здесь все проще. Просто добавьте, например, в класс a псевдокласс :hover в Таблице стилей. Затем добавим:

При этом 0.5s — время анимации в секундах. Таким образом у нас получилось:

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

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