| 18.02.2016
CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.
Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.
Для более детального ознакомления вы можете скачать архив с файлами.
Все эффекты работают с помощью свойства transition (англ. transition - «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.
Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }
1. Изменение цвета при наведении курсора
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:
Color:hover { background:#53ea93; }
2. Появление рамки
Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:
Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }
3. Свинг
Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:
- @keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
- animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.
4. Затухание
Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6:
Fade { opacity: 1; } .fade:hover { opacity: 0.6; }
Для противоположного результата поменяйте значения местами:
5. Увеличение
Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:
Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
6. Уменьшение
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:
Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }
7. Трансформация в круг
Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:
Circle:hover { border-radius: 70%; }
8. Вращение
Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:
Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }
9. 3D тень
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):
Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }
Поддержка браузерами
На сегодняшний день свойство transition поддерживается следующими браузерами:
| Десктопные браузеры | |
|---|---|
| Internet Explorer | Поддерживается версией IE 10 и выше |
| Chrome | Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-) |
| Firefox | Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-) |
| Opera | Поддерживается с версии 12.1 |
| Safari | Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-) |
Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.
Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!
Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое . Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта на них курсора мыши. Реализованы эти могут как с помощью различных плагинов jQuery, так и на чистом .
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.
Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
Дабы не ломать общую картину, не стал коверкать машинным переводом названия эффектов(за исключением некоторых), оставил оригиналы заголовков такими, как их обозвал разработчик.
Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.
iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.
Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.
Совсем уж простецкий эффект перехода, без особых наворотов, полностью круглое изображение в рамке, трансформируется меняя фокус при наведении и всё.
Hover-эффекты для миниатюр на CSS3
Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.
Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.
Вращение миниатюр при наведении
Простой эффект вращения круглых миниатюр при наведении на них курсора мыши, примерно такой же вы можете видеть у меня на блоге, в анонсах записей на главной. Реализуется парой-тройкой строк кода css.
Если перевести дословно:"Сексуальный эффект при наведении на ". Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.
Пять различных эффектов для изображений при наведении на них. Всплывающие подписи в трёх вариациях, шторки в виде смены степени прозрачности и вращение с перемещением по горизонтали.
4 Вида эффектов анимации подписей изображений, реализованных исключительно средствами CSS3. Разные позиции при появлении и эффекты переходов, вполне себе стандартное исполнение. Чтобы понять, как работает анимация, загляните в исходный код демо-страницы, отдельной документации не обнаружил.
Выстроенные в сетку галереи миниатюры с различными эффектами появления подписей, вращение, проявление, всплытие и т.д. Документация по использованию и настройке довольно скудна, но при особом желании разобраться можно.
Данный эффект особого ничего из себя не представляет, банальная смена яркости изображений при наведении, разве что добавлены элементы анимации. Разбираться с подробностями реализации придётся самостоятельно, разложив исходники демо.
Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.
Различные эффекты анимации рамки вокруг изображений, смотрится довольно привлекательно, имеется подробное руководство по настройке и использованию.
Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.
Идея состоит в том, чтобы создать SVG, который представляет собой форму-фон для какой-то надписи и превращается в другую форму при наведении курсора мыши. Таким образом можно сделать множество разных вариантов, в примере же, показаны три вида эффектов переходов. Достоинством использования SVG является то, что мы можем изменить размер формы в соответствии размеров родительского контейнера.
Раздвижные изображения
Суть данного эффекта в том, что изображение раздвигается вверх и вниз для появления подписи. Если поработать с параметрами стилей, думаю можно добиться вполне-себе симпатичных эффектов, а по умолчанию, выглядит всё совсем уж просто.
С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.
Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.
Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.
Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.
Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.
Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.
Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.
6 Подписей к картинкам
6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.
Ну и наконец, напоследок так сказать, не могу не упомянуть о самом простейшем способе создания всплывающей подписи к миниатюре с помощью CSS3.
Об этом способе я рассказывал в одном из предыдущих своих уроков: .
Хотите приступить к работе над созданием сайта как можно быстрее? Теперь это абсолютно возможно! По той простой причине, что на маркетплейсе TemplateMonster появился новый раздел с . Коллекция будет пополняться, но и сейчас уже можно присмотреть что-то подходящее для вашего онлайн-проекта. Все, что вам нужно сделать — это выбрать свое идеальное готовое решение и поработать с презентацией нужной информации. И не забывайте, что текст для шаблона был написан вручную.
С Уважением, Андрей
Урок в котором мы научимся создавать интересные эффекты при наведении на изображения. Особенность заключается в использовании свойства border . Работать такие эффекты будут только в современных, поддерживающих css3 , браузерах.
HTML
Довольно простая структура.
Создаем родительскую оболочку с классом view
и контентом внутри. Затем создаем контейнер с классом mask
, где и будем применять css3
переходы получая эффекты при наведении. В некоторых примерах этот синтаксис немного изменится в зависимости от применяемого эффекта.
CSS
Здесь приведены основные свойства нашего урока. Для каждого эффекта будет свой css файл, вы же можете объединять различные эффекты в один css файл.
View { width: 300px; height: 200px; margin: 10px; float: left; border: 5px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 0px 0px 5px #aaa; cursor: default; } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; } .view img { display: block; position: relative; } .view a.info { background:url(../img/link.png) center no-repeat; display: inline-block; text-decoration: none; padding:0; text-indent:-9999px; width:20px; height:20px; }
Пример 1
HTML
Добавим класс effect к элементу с классом view для этого эффекта:
CSS
Чтобы уменьшить урок мы опустили в коде префиксы (-moz,-webkit
и др.), но все они есть в css
файлах эффектов.
В дополнении к свойству border
для создания треугольника, мы использовали многократные переходы, что позволило иметь больше контроля над свойствами во время анимации:
Effect img { opacity:1; transform:scale(1,1); transition: all 0.2s ease-in; } .effect .mask { opacity:0; overflow:visible; border-color:rgba(0,0,0,0.7) transparent transparent transparent; border-style:solid; border-width:150px; width:0; height:0; transform:translateY(-125px); transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out; } .effect a.info { opacity:0; transform:translateY(-125px); transition: transform 0.3s ease-in, opacity 0.1s ease-in-out; } .effect:hover img { opacity:0.7; transform:scale(2,2); } .effect:hover .mask { opacity: 1; transform: translateY(0px); } .effect:hover a.info { opacity:1; transform:translateY(100px); }
Пример 2
HTML
Синтаксис этого примера несколько отличается, обычно достаточно добавить специальный класс second-effect к элементу с классом view , но тут мы еще добавили ссылку внутри элемента с классом mask :
CSS
В этом примере мы собираемся работать с параметрами свойства border . Также реализовали box-sizing . Свойство box-sizing используется для изменения дефолтной box модели вычисляющей ширину и высоту элементов.
Second-effect .mask { opacity: 0; overflow:visible; border:0px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s ease-in-out; } .second-effect a.info { position:relative; top:-10px; opacity:0; transform:scale(0,0); transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; } .second-effect:hover .mask { opacity: 1; border:100px solid rgba(0,0,0,0.7); } .second-effect:hover a.info { opacity:1; transform:scale(1,1); transition-delay:0.3s; }
Пример 3
HTML
Добавим к классу view специальный класс third-effect для этого эффекта:
CSS
Как видно, то всего с помощью нескольких строк кода можно получить хороший эффект благодаря свойству border :
Third-effect .mask { opacity: 0; overflow:visible; border:100px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s ease-in-out; } .third-effect a.info { position:relative; top:-10px; /* Center the link */ opacity: 0; transition: opacity 0.5s 0s ease-in-out; } .third-effect:hover .mask { opacity: 1; border:100px solid rgba(0,0,0,0.7); } .third-effect:hover a.info { opacity:1; transition-delay: 0.3s; }
Пример 4
HTML
Разметка в этом примере короче по сравнению с предыдущими примерами, но получаемый эффект очень внушительный:
CSS
Используя только класс mask в комбинации со свойством border-radius получится довольно красивый эффект. Также использовали свойство visibility , которое позволяет в конце перехода получить кликабельное изображение.
Fourth-effect .mask { position:absolute; /* Center the mask */ top:50px; left:100px; cursor:pointer; border-radius: 50px; border-width: 50px; display: inline-block; height: 100px; width: 100px; border: 50px solid rgba(0, 0, 0, 0.7); box-sizing:border-box; opacity:1; visibility:visible; transform:scale(4); transition:all 0.3s ease-in-out; } .fourth-effect:hover .mask { opacity: 0; border:0px solid rgba(0,0,0,0.7); visibility:hidden; }
Пример 5
HTML
В этом последнем примере такой же синтаксис, как и в четвертом, отличия лишь в добавляемом классе fifth-effect вместо fourth-effect:
CSS
Также здесь мы использовали свойство border и visibility . Трюк заключается в изменении свойства border с solid на double :
Fifth-effect img { opacity:0.2; transition: all 0.3s ease-in; } .fifth-effect .mask { cursor:pointer; opacity:1; visibility:visible; border:100px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620); } .fifth-effect:hover .mask { border:0px double rgba(0,0,0,0.7); opacity:0; visibility:hidden; } .fifth-effect:hover img { opacity:1; }
Очень часто на сайтах вы могли встречать изменение или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс:hover в CSS. Сегодня рассмотрим некоторые приемы позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:
Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов.
Hover эффект в CSS стилях добавляется справа от элемента следующим образом:
| a: hover { color : red ; } |
a:hover { color: red; }
Чаще всего механизм применяется именно для ссылок дабы изменить их цвет или добавить/убрать подчеркивание. Однако он может быть задан и другим блокам, кнопкам, текстам или использоваться при создании .
| button : hover { background : rgba (0 , 0 , 0 , 0 ) ; color : red ; } .my-picture : hover { opacity : 0.5 ; filter : alpha(opacity= 50 ) ; } |
button:hover { background: rgba(0,0,0,0); color: red; } .my-picture:hover { opacity: 0.5; filter: alpha(opacity=50); }
Современные браузеры одинаково корректно воспринимают CSS hover эффект при наведении, хотя в старых версиях IE 6 и ниже он срабатывает исключительно для линков. Плюс в некоторых источниках говорилось, что этому обязательно нужно указывать в коде .
Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы:link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после:link и:visited, если они существуют.
Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.
Hover эффекты кнопок и ссылок
Как мы уже говорили выше, это самая популярная категория объектов на сайте, где встречается подобный прием. Вот вам несколько вариантов по теме.
Простые примеры для кнопок
Sullivan Buttons
Фишка в том, что при наведении на разные кнопки кроме изменения цвета фона запускается также небольшая анимация с иконками (причем у каждой своя).
CSS Icons on Hover
Подборка из 5ти простых вариантов реализации задачи. Во всех случаях задействованы дополнительные иконки, которые появляются справа/слева от текста либо заменяют его.
Button Hover Effects
По сравнению с прошлым примером эти 12 функций срабатывания выглядят куда интереснее: как визуально, так и в плане кода. Не обошлось без JS.
Nav Hovers
Несколько фишек, которые позволяют сделать более необычные нежели с базовым свойством text-decoration. Фон кнопки дополнительно заполняется разными визуальными эффектами.
Info on Hover
Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.
Mana Button
Один из самых оригинальных вариантов hover эффекта в блоках — при наведении выполняется словно заполнение его жидкостью. В реализации используется CSS, HTML и SVG. В определенной тематике сайтов данный сниппет однозначно будет находкой.
Hover эффекты для изображений
15 базовых приемов
Не смотря на то, что статья была опубликована достаточно давно методы корректно работают и сейчас. Здесь, наверное, собраны все возможные типовые преобразования для графики: несколько видов зума, повороты, размытие, ч/б, прозрачность, фильтры, сияние и др. Очень полезный материал.
Красивые hover эффекты изображений
Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.
Barberpole Hover Animation
Не сложная на первый взгляд анимация, которая в итоге смотрится очень классно и нестандартно.
CSS hover эффекты с определением направления
Отличная подборка сниппетов и кодов по теме находится в статье с css-tricks.com . Все эти примеры объединяет тот факт, что в процессе работы определяется местоположение и направление движения курсора. Это, в свою очередь, позволяет создавать достаточно оригинальные реакции при наведении на элементы страницы:
Во многих сложных решениях Javascript и jQuery для hover эффектов позволяют значительно разнообразить и улучшить результат.
Direction Aware Hover Goodness
Direction Aware Tiles using clip-path Pure CSS
Остальные фишки ищите в оригинальной статье.
Animatism
В этой разработке более 100 простых способов «анимации» изображений или объектов при наведении. С помощью данных функций сможете реализовать разное появление кнопок, заголовков, текстов, социальных иконок и т.п. Есть варианты с изменением отображения картинок, накладками полупрозрачного фона.
По ссылке находится 7 CSS3 hover эффектов заголовков — когда при наведении на изображение, пользователь увидит информационный блок с тайтлом, кратким описанием и ссылкой для перехода. Нельзя сказать, что примеры очень оригинальные, но они однозначно помогут разнообразить статичный контентный проект.
CSS Hover библиотеки
Hover.css
Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.
Imagehover.css
Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.
В проекте более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.
Итого. Надеемся эти css hover эффекты при наведении на картинки, блоки, ссылки и другие элементы страницы помогли вам разобраться в данной теме. Самые удачные, на ваш, взгляд решения можете внедрить в своих сайтах — будь то подключение полноценной библиотеки или просто интеграция небольшого варианта кода.
Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.
Очередная анимация на CSS3, с присутствием hover-эффект на изображение, которое идет на изображение разного порядка тематического сайта. Здесь появление заключается в том, что оно не будет появляться с разных сторон. Здесь оно в уникально, а точнее с наведении курсора, плавно и потом быстрее выезжает самого снимка, что смотрится просто шикарно. Не говоря о том, что несет за собой информацию и безусловно функциональные действия. Это название материала, если установлено в каталоге фотографий, то можно кратко описание выставить.Но и сам переход, где кнопка создана на самом фоне по центру, где светлые тени идут обводом и также имеет свой эффект. И все это происходит на прозрачно темном фоне, что подойдет на светлый интернет ресурс и аналогичный по оттенку в материале. Можно назвать, что все сделано современно с идеи для тонких эффектов зависания, где работает, если только курсор находится на снимке. Красивый эффект зависания, который минимизирует изображения, придающие пространство сплошной цветной коробке с текстом, что находится внутри, со всем функционалом.
Эффекты Hover доступны на странице продуктов любого шаблона. Вы можете отобразить название продуктов и цены над цветовым наложением, который можно поставить в ручную по палитре цвета. Но это касается многих тематических наклонений, это как софт или игровой ресурс. Также не нужно забывать, что отличный способ продемонстрировать особенность или ключевые детали для каждого продукта.
.png" alt="">
Скрипты на zotner.ru
Переход
CSS
Abecause_certainlyn {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
Abecause_certainlyn .easytuni_cigaretolsag {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
background-color: rgba(27, 25, 25, 0.65);
-webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0.35, 1.4);
transition: all 0.4s cubic-bezier(0.88, -0.99, 0.37, 1.43);
}
Abecause_certainlyn img {
display: block;
position: relative;
-webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0.33, 1.4);
transition: all 0.4s cubic-bezier(0.88, -0.99, 0.36, 1.42);
}
Abecause_certainlyn h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(25, 24, 24, 0.73);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0.44, 1.36);
transition: all 0.4s cubic-bezier(0.88, -0.99, 0.44, 1.44);
padding: 10px;
}
Abecause_certainlyn a.pembarra_sedogzam {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #f7f2f2;
border: 1px solid #fff;
background-color: rgba(29, 28, 28, 0);
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.16, 0.89);
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.24, 0.83);
margin: 50px 0 0;
padding: 8px 15px;
}
Abecause_certainlyn a.pembarra_sedogzam:hover {
box-shadow: 0 0 6px #f9ecec;
}
Abecause_certainlyn:hover img {
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
Abecause_certainlyn:hover .easytuni_cigaretolsag {
opacity: 1;
filter: alpha(opacity=100);
}
Abecause_certainlyn:hover h2,.abecause_certainlyn:hover a.pembarra_sedogzam {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
Abecause_certainlyn:hover a.pembarra_sedogzam {
-webkit-transition-delay: .2.1s;
transition-delay: .2.1s;
}
Чтоб понять, как все производится, то будет ниже Demo и снимки при работе.
По умолчанию:
Это когда навели курсор:
Многие эффекты используют функции CSS3, такие, как переходы, трансляции и анимации. Старые браузеры, которые не поддерживают эти функции, могут нуждаться в дополнительном внимании, чтобы убедиться, что эффект отложенного зависания все еще существует.
Обзор технологий
