Верстка сложных элементов

[Alexander_G]

Всем привет!

Есть задание, сверстать фигуру представленную ниже на картинке, так как предусмотрен hover эффект тени по всему контуру фигуры.

Возникла сложно с версткой элементов обрамленных красным квадратом...

Как можно сверстать эти элементы?

Заранее большое спасибо за помощь!

[Rise]

Alexander_G,
Самое простое две картинки с тенью и без.

[Alexander_G]

Большое спасибо! Но это часть пазла представленного из четырёх элементов, и на каждом должен быть hover эффект... С картинками это реально сделать?

[Nexus]

Alexander_G, что мешает при hover'е сменить адрес картинки?

[Rise]

Alexander_G,
Конечно реально, метод с картинками самый древний и простой, есть еще метод с svg но там посложнее будет.

[Alexander_G]

Спасибо большое! Будем пробовать

[Rasy]

Alexander_G,
Что подразумевается под hover эффектом? Тень (box-shadow)?

[Alexander_G]

Alexander_G,
Что подразумевается под hover эффектом? Тень (box-shadow)?

Совершенно верно. При на ведение на каждый пазл, появляется тень по контуру пазла.

[Rasy]

Alexander_G,
Есть профессиональный способ со спрайтами.
1. При наведении на квадрат делается обычная css фигура, квадрат с бэкграундом и тенью повторяющую box-shadow картинки.
2. Обрамленные элементы вырезаются и соединяются в спрайт.
3. При ховере просто подставляем нужную картинку из спрайта для псевдоэлементов ::before и ::after.

[Alexander_G]

Огромное спасибо