Как сверстать данный блок с 6-ти угольником?

Question

[Hoffman_ZZZ]

Добрый день!
Помогите сверстать блок.
Нужно что бы фоновое изображение было в таком стиле как на скрине (еле видным, может фильтр наложить какой нужно), а это же изображение в 6тиугольнике было нормально видно, и при hover 6ти угольник становился цветным
Заранее благодарен.

Comments

[Сергей]

liis.supra-test.ru/products/do-home2 блок "Посетите 2 наших магазина", там сделано подобное, только кружочки, но это не важно

Answer 1

[teotlu]

Попробуйте svg-маски.

Answer 2

[Илья]

Например, вот.
Поиск по codepen по запросу "hexagon" выдаст ещё несколько вариантов.

Answer 3

[GreatRash]

Научитесь задавать вопросы правильно. Первым делом вы должны сообщить под какие версии браузеров вам нужна работоспособность...

Answer 4

[Ilya Korablev]

Я думаю так, что все, что не эти шестиугольники - фоновое изображение с прозрачностью. А вообще, смотрите через F12.

Answer 5

[Валентин Дубровский]

на background вырезаете фон с этим эффектом, потом для каждого блока вырезаете цветной шестиугольник(желательно в спрайт), и накладываете css filter grayscale (filter: grayscale(100%), только не забудьте про префиксы для браузеров), при ховере естественно убираете до 0%.

Comments

[Hoffman_ZZZ]

А если потом я захочу поменять фото на фоне? то заново все вырезать?

[Валентин Дубровский]

Hoffman_ZZZ: думаю да, но согласитесь, это самый простой способ реализации.