Доброго времени суток!
Я написал скрипт, который увеличивает картинки если навести на них курсор (или на должность, соответствующую этому человеку). Если убрать курсор с картинки/должности, картинка возвращается обратно в предыдущую ширину и высоту. При этом при увеличении проявляется вторая картинка. При убирании курсора/пальца с картинки/фотки opacity картинки для ховера становится обратно в 0.
Я бы и сам рад обрезать эти картинки по нужной форме в фотошопе и не парится со всякими масками. Только мне нужно сделать так, чтобы форма вращалась, а фото стояло на месте. Вот как на этом сайте:
https://contra.com/
Картинки обрезаны тэгами mask в которых в каждом свой тэг path со своим значением. Я написал в anims.css анимацию вращения, чтобы каждый из этих path крутился. Но почему-то ромбы и многоконечные звёзды крутятся правильно (опорная точка находится посередине родительского дива и посередине самого path), а прямоугольники крутятся неправильно (в центре родительского дива находится угол прямоугольника).
Анимация неправильно ведёт себя на смм-специалисте, на аналитике и на дизайнере.
Всё что знал перепробовал, ничего не помогает. Не знаю что делать...
Вот ссылка на сайт:
https://konstantinstepanyan.github.io/test/
Вот ссылка на репозиторий на гитхабе:
https://github.com/konstantinstepanyan/test
Благодарю за внимание
Простой
Средний
