Как реализовать такую анимацию?

Question

[Дмитрий]

Добрый вечер, подскажите как реализовать такую анимацию? прикрепляю ссылку на гифку ниже
www.picshare.ru/view/7778894

Comments

[Hello1]

не надо так делать

[GreatRash]

Что именно не получается?

[Евгений Вольф]

htmlbook.ru/css/clip - не оно?

[Евгений Вольф]

Или вот это... https://css-tricks.com/clipping-masking-css/

[Дмитрий]

1 1: чуть подождите пока прогрузится и будет нормально видно

[Дмитрий]

Евгений Вольф: да, щас попробую, скорее всего то что нужно)

[Дмитрий]

Hello1: я бы рад так не делать, но это не мое желание)

Answer 1

[Максим Тимофеев]

Есть блок, на фоне фото. С помощью псевдо элемента :after создаем геометрические фигуры, которые перекрывают фон.
А если надо изысканнее и красивее - можно использовать svg.

Answer 2

[Максим]

бред, а не анимация.. ни к чему совсем

примерно делается так:
1. создаём блок с position: absolute, transform: rotate(45deg) - в него же помещаем картинку transform: rotate(-45deg)
2. псевдо элемент :after (белый треугольник)
3. на ховер transform: rotate(0) translateX(-50px). у картинки transform: rotate(0)