ZorNet.Ru — сайт для вебмастера » HTML и CSS » Импульсный hover эффект изображений на CSS

Импульсный hover эффект изображений на CSS

Прекрасно созданный hover эффект, который идет импульсным, где изначально одна волна проходит и автоматически вторая идет по изображению. Эта анимация кардинально отличается от других, где нет не каких шрифтовых кнопок, так как все без них оригинально выглядит. Здесь в дизайн применены обводы, которые идут на каждый импульс, что по ним наблюдаются красивые трюки.

Также выставил высоту, где проверки на работоспособность, здесь все зависло от процента высоты, где нужно было все под один размер устанавливать. Теперь о самом фоне, который идет под темно прозрачной гаммой, да, здесь нет не чего необычного, но как уже говорил, это тонко созданный отвод перекреплен каждому фону, что появляется при наведении курсора.

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

Так на темном фоне будет выглядеть светлый формат:

Оригинальный эффект при наведение курсора на изображение

Приступаем к установке:

HTML

Код

CSS

Код

.dinagona_vometus {
list-style: none;
padding: 0;
margin: 0;
}
.dinagona_vometus li {
border: 5px solid transparent;
box-sizing: border-box;
width: 30%;
float: left;
position: relative;
cursor: pointer;
}
.dinagona_vometus img {
max-width: 100%;
vertical-align: middle;
  border-radius: 5px;
  height: 278px;
}

.dinagona_vometus li:before {
transition: all .7s ease;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2b2a2a;
transform: scale(0);
  border-radius: 5px;
}
.dinagona_vometus li:hover:before {
opacity: .7;
transform: scale(1);
}
.dinagona_vometus li:after {
transition: all .7s ease .3s;
content: "";
position: absolute;
top: 9px;
left: 9px;
right: 9px;
bottom: 9px;
border: 1px solid #a7a0a0;
background: #191818;
opacity: 0;
transform: scale(0);
  border-radius: 5px;
}
.dinagona_vometus li:hover:after {
opacity: .41;
transform: scale(1);
}

Теперь веб разработчика появилась отличная возможность использовать этот уникальный трюк для всех изображений, кнопок или логотипов.

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

Демонстрация

08 Октября 2018 Просмотров: 1099 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0