Необычный hover-эффект для изображений Нашел один любопытный ховер-эффект для карточек с изображениями — раньше вроде бы не встречал. Выглядит так, будто картинка начинает «рассыпаться» в стороны при наведении. Делается это, конечно, немного геморно и не сказать, что код самый изящный, но если нужен нестандартный визуальный эффект, то можно попробовать) HTML: <div class="card"> <img class="card-front-image" src="..." /> <div class="card-faders"> <img class="card-fader" src="..." /> <!-- ещё 7 копий --> </div> </div> card-front-image — основная картинка (всегда видна). card-faders — контейнер со скрытыми копиями, которые активируются при :hover. CSS: .card-faders { height: 100%; width: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; opacity: 0; transition: opacity 1500ms; } Контейнер .card-faders растянут на всю карточку, копии изначально невидимы. Активация при наведении: .card:hover .card-faders { opacity: 1; } При наведении на .card контейнер с копиями плавно проявляется за 1.5 секунды. Распределение анимаций: .card-fader:nth-child(odd) { animation: fade-left 3s linear infinite; } .card-fader:nth-child(even) { animation: fade-right 3s linear infinite; } Разделяем копии на две группы: ■ Нечётные (1-я, 3-я, 5-я, 7-я) получают анимацию fade-left — будут уходить влево. ■ Чётные (2-я, 4-я, 6-я, 8-я) получают анимацию fade-right — будут уходить вправо. Волновой эффект: .card-fader:is(:nth-child(3), :nth-child(4)) { animation-delay: 750ms; } .card-fader:is(:nth-child(5), :nth-child(6)) { animation-delay: 1500ms; } .card-fader:is(:nth-child(7), :nth-child(8)) { animation-delay: 2250ms; } 1-я и 2-я копии — стартуют сразу (задержки нет). 1-я идёт влево, 2-я вправо. 3-я и 4-я копии — стартуют через 750ms. 5-я и 6-я копии — стартуют через 1500ms. 7-я и 8-я копии — стартуют через 2250ms. Анимация: @keyframes fade-left { from { scale: 1; translate: 0%; opacity: 1; } to { scale: 0.8; translate: -30%; opacity: 0; } } И тоже самое для fade-right, только translate: 30%; В итоге мы получаем эффект, который сложно назвать «чистым» или универсальным, но он точно выглядит необычно) Упростить его можно с помощью JS, чтобы генерировать копии динамически и гибко настраивать параметры. Результат можно найти здесь.