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

Question

[Алексей Лушников]

По сути есть сетка 3*2 в виде пазла.
Подскажите, пожалуйста, как правильно (и вообще как) сверстать элементы пазла, чтоб при наведении мыши (ну или добавлении класса, например, "active") выделялся элемент пазла целиком, как показано на рисунке:

Answer 1

[Юрий Лобанов]

Картинками, при наведении меняйте атрибут src.

Answer 2

[varore]

svg картинками с определенном стилем и анимацией исчезновения

Answer 3

[zenaku]

ИМХО, картинки с позиционирование и минусовым margin.

Comments

[Алексей Лушников]

не совсем понятно предложение. какая именно картинка имеется ввиду?

[Алексей Лушников]

я думаю так: например, есть цветная подложка. поверх нее слой с пазлами(в виде спрайта с возможными вариантами выделения) при наведении на какой-то элемент - позиционировать именно слой пазла.

Answer 4

[Виталий Желтяков]

Две картинки друг над другом. При Hover одна из них становиться прозрачной. Можно использовать задержку анрмации