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

Всем привет!

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

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

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

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

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

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

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

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

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

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

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

Alexander_G,
Забыл указать главное преимущество. Не будет мерцания, т.е. подгрузки картинки.