Создаем необычный эффект при наведение на изображение, где получается глюк или тряска элемента виде помех, где все создано при чистом CSS. Этот трюк больше подойдет для привлечение, хотя изначально и по умолчанию не чего не выдает, что эффект подключен.
Теперь веб мастер может пошутить над пользователями или гостями сайта, где подключаем к любому элементу на который нужно навести клик. Это безусловно картинка для уличение или кнопка скачать, а также может пригодится для оригинальности сайта.
HTML
Код
<div class="posiparu_eserie_alged"></div>
CSS
Код
.posiparu_eserie_alged {
position: relative;
width: 100%;
height: 100vh;
background: url(http://zornet.ru/_fr/63/5097863.jpg);
background-size: cover;
}
.posiparu_eserie_alged:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://zornet.ru/_fr/63/5097863.jpg);
background-size: cover;
opacity: 0.5;
}
.posiparu_eserie_alged:hover:before {
animation: animate .2s infinite;
}
@keyframes animate {
0% {
background-position: 0 0
filter: hue-rotate(0deg);
}
10% {
background-position: 4px 0;
}
20% {
background-position: -4px 0;
}
30% {
background-position: 12px 0;
}
40% {
background-position: -16px 0;
}
50% {
background-position: 24px 0;
}
60% {
background-position: -10px 0;
}
70% {
background-position: 15px 15px;
}
80% {
background-position: -30px -20px;
}
100% {
background-position: 0 0
filter: hue-rotate(360deg);
}
}
По умолчанию в стилях прописано width: 100%;height: 100vh; - что идет на полный экран, вы можете сделать свои значение и гораздо меньше, под любую картинку или изображение с кнопками, что установлены под функционалом.
Демонстрация
