Ховер-эффекты для картинок
Разрезанная фотография
Код:
<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 одинаковых фото — выделила их в коде красным. Наведя на картинку курсор, изображение раздвигается в разные стороны, становиться не чётким, дрожит.Код увидела на сайте.
Комментарии со спамом удаляются.