Как сделать плашку с цветами чтобы при наведении менялась картинка на слайдере?

Question

[Flur]

Есть слайдер, снизу ховер-панель с блоками, с группой 5 оттенков. При наведение появляется плашка с развёрнутыми 5 оттенками. Блоки групп выстраиваются в несколько рядов, если в одном ряду оказывается больше 12 групп.

· На ховере на блоке с группой оттенки должны выстраиваться в ряд и склеиваться в одну картинку как тут:


· На ховере отдельного оттенка показывается только одна картинка:


Вопрос: Как проще это реализовать? как упорядочить картинки ?

Answer 1

[Олег]

Можно вообще сделать цвет для background, а флакон png
Или так https://jsfiddle.net/joomla/tu8nc3xa/ ;)

Comments

[Flur]

Флаконы и так формате в .png (забыл написать). Блок с группой оттенков тоже можно как картинку задать, при наведении открыть tooltip с палитрой цветов. Проблема в другом: Как проше реализовать смену картинок ?

[Олег]

aslanovich: ссылку на сайт со слайдером дайте.

[Flur]

Олег: http://stellary.ru/catalog/ногти/50/62

[Flur]

stellary.ru/catalog/%D0%BD%D0%BE%D0%B3%D1%82%D0%B8...

Answer 2

[iBird Rose]

посмотри в слайдере колбек функции. полюбому есть переход к слайду по номеру. ну и вешай на эти кнопки эти переходы на нужный слайд