Как поделить изображение на секции и на каждую секцию выставить эффект?

Question

[kschingiz]

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

Привожу пример: Изображение

При наведении на секции, должно работать примерно, вот так:

И так:

Answer 1

[Сергей Соколов]

Не знаю, что у вас будет за эффект, но как вариант:

SVG, clipping path позволяет вырезать часть картинки любой векторной формой.
Т.е. вы делаете SVG, где размещены две копии изображения, каждая со своей маской. Ещё примеры обрезки картинки в svg.

Comments

[kschingiz]

Спасибо, эффект он будет как я привел в примерах. То есть получается я гружу изображение, делю его clipping-ом, а потом на каждый ставлю эффект. Спасибо. =)

[kschingiz]

Если вариант подойдет, то отмечу как решение =)

[Сергей Соколов]

Рабочий пример. Но вариант ненадёжен: проверяйте поддержку в браузерах.

[kschingiz]

огромное спасибо, то что надо =)

[kschingiz]

А можно на каждую секцию поставить при наведении JS ?

[Сергей Соколов]

Конечно – так же, как и на другие элементы DOM.

[kschingiz]

@sergiks Вы прям спаситель мой =)

[Сергей Соколов]

@kschingiz незачто : ) Как раз сам разбирался вчера с SVG, так что свежо.