Как сделать многослайдовость на детальной картинке по hover?

Question

[Егор Трегубенко]

Не могу что то найти пример, но суть такая : при наведении допустим на расстояние от 1 до 2 появляется одна картинка, при наведении на 2-3 появляетяс 2я картинка и т.д, есть какие то готовые библиотеки ? или как это реализовать?

Comments

[Anna_BS]

где должна появляться картинка? там где ты наводишь?

[Егор Трегубенко]

Anna_BS: картинка меняется сама полностью , т.е есть просто невилимые "координаты" которые реагируют при наведении

[Anna_BS]

Егор Трегубенко: codepen.io/Anna_Batura/pen/MewjoW?editors=1100

[Егор Трегубенко]

Anna_BS: спс, вот ниже комен, так надо было, только не пойму как реализовать

Answer 1

[Егор Рублёв]

Интересно было реализовать самому.
https://jsfiddle.net/salofun/mt5kn1re/12/

Comments

[Егор Рублёв]

можно добавить плюшки https://jsfiddle.net/salofun/mt5kn1re/16/

[Егор Трегубенко]

ооо, спасибо чуваак)

[Егор Трегубенко]

Егор Рублёв: чувак ты код удалил, дай ещё раз ссылку не успел забрать)) плииз

[Егор Рублёв]

Егор Трегубенко: сорь, но я не удалял. я дописал его до конца. https://jsfiddle.net/salofun/fqLyz6at/18/ разобраться думаю не составит труда.

Answer 2

[Артем Лучин]

Посмотрите пример тут. Кажется именно то, что искали.

Comments

[Егор Трегубенко]

да точно, а есть примеры ? через ctrl - u не очень)

[Артем Лучин]

Конкретного примера не нашел, но попробуйте сделать по аналогии с тем примером, который вам дали в комментах выше (codepen).
Только при наведении на .item он не должен быть виден (opacity: 0) и также должен изменять фон (background-image) родителя.
Как вариант храните ссылку на картинку в .item в параметре data-image, а при наведении на .item, читайте этот путь и записывайте его как новый url для background-image родителя. Может перемудрил...