Возможно ли изменять положение маски при помощи css?

Question

[vasIvas]

Есть три div (квадратики с дыркой в центре) и есть div прямоугольник площадь которого равна трем квадратикам. Возможно ли сделать так, чтобы при на ведении на любой из трех квадратиков, этот прямоугольник смещался? Вот если я навел на первый квадратик, то прямоугольник полностью его закрыл.
Навел на второй квадратик, прямоугольник полностью закрыл и первый и второй квадратик. Возможно так сделать при помощи одного css?

И один оффтоповый вопрос - css маски уже все современные браузеры поддерживают на всех платформах?

Comments

[Арам Арамян]

код в студию

[vasIvas]

GreenBee: код чего? Квадратиков?

[Арам Арамян]

vasIvas: да

Answer 1

[Денис Инешин]

CSS маски пока не очень в плане кроссбраузерности. Лучше обратите внимание на SVG-маски. Они как раз уже вполне везде есть и их вполне можно анимировать. Побольше инфы:
https://developer.mozilla.org/en-US/docs/Web/SVG/T...
css.yoksel.ru/css-and-svg-masks