Ховер-эффекты для картинок

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

Разрезанная фотография

Код:

<div class="diagonal-hover">
    <img src="ваша картинка" />
    <img src="ваша картинка" />
    <img src="ваша картинка" />
    <img src="ваша картинка" />
</div>
<style>
.diagonal-hover {
    margin: 30px 0 20px 40px;
    position: relative;
}
.diagonal-hover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 300ms ease;        
}
.diagonal-hover img:nth-of-type(1) {
    clip-path: polygon(0 0, 0 25%, 25% 0);
    transform: translate(-11px, -11px);
    position: static;
}
.diagonal-hover img:nth-of-type(2) {
    clip-path: polygon(25% 0, 0 25%, 0 100%, 25% 100%, 75% 0);
    transform: translate(-32px, 7px);
}
.diagonal-hover img:nth-of-type(3) {
    clip-path: polygon(100% 0, 100% 75%, 75% 100%, 25% 100%, 75% 0);
    transform: translate(-15px, -10px);
}
.diagonal-hover img:nth-of-type(4) {
    clip-path: polygon(100% 75%, 75% 100%, 100% 100%);
    transform: translate(-29px, 4px);
}
.diagonal-hover:hover img {
    transform: translate(-15px, -10px);
}
</style> 

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

Автор кода

Дрожащее изображение

Код:

<div class="glitch-hover">
    <img src="ваша картинка" />
    <img src="ваша картинка" />
    <img src="ваша картинка" />
    <img src="ваша картинка" />
    <img src="ваша картинка" />
</div>
<style>
.glitch-hover {
    margin: 10px 0;
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.glitch-hover img {
    position: absolute;
    top: 0;
    left: 0;
}
.glitch-hover img:nth-of-type(1) {
    position: static;
}
.glitch-hover img:nth-of-type(2) {
    opacity: 0.2;
}
.glitch-hover img:nth-of-type(3) {
    opacity: 0.2;
}
.glitch-hover img:nth-of-type(4) {
    opacity: 0.2;
}
.glitch-hover img:nth-of-type(5) {
    opacity: 0.2;
}
.glitch-hover:hover img:nth-of-type(2) {
    animation: glitch-1 1s alternate infinite ease;
}
.glitch-hover:hover img:nth-of-type(3) {
    animation: glitch-2 1s alternate infinite ease;
}
.glitch-hover:hover img:nth-of-type(4) {
    animation: glitch-3 1s alternate infinite ease;
}
.glitch-hover:hover img:nth-of-type(5) {
    animation: glitch-4 1s alternate infinite ease;
}
@keyframes glitch-1 {
    25% {
        top: 20px;
    }
    50% {
        top: 5px;
    }
    75% {
        top: 15px;
    }
    100% {
        top: 0;
    }
}
@keyframes glitch-2 {
    25% {
        top: -20px;
    }
    50% {
        top: -5px;
    }
    75% {
        top: -15px;
    }
    100% {
        top: 0;
    }
}
@keyframes glitch-3 {
    25% {
        left: 20px;
    }
    50% {
        left: 5px;
    }
    75% {
        left: 15px;
    }
    100% {
        left: 0;
    }
}
@keyframes glitch-4 {
    25% {
        left: -20px;
    }
    50% {
        left: -5px;
    }
    75% {
        left: -15px;
    }
    100% {
        left: 0;
    }
}
</style>

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

Код увидела на сайте.