Как сделать fade in/ fade out подложку на owl carousel?

Question

[Илья Бельский]

Доброго времени суток!

Поделитесь мнением, как сделать следующее;

Необходимо сделать owl carousel, которая выглядит вот так:



Каждая картинка это отдельная карусель, при наведении текст и синий полупрозрачный фон должны исчезать, а сама карусель должна в это время начинать листать картинки. На примере пользователя:

1) Пользователь навел на картинку
2) Исчез текст и подложка
3) Карусель начала листать картинки.
5)Пользователь увел курсор в сторону, подложка плавно появилась, а карусель прекратила движение
-------------------------------------------------------
Доп.действия

4) Пользователь кликнул на текущую картинку
5) Открылось модальное окно галереи вроде fancybox или magnific

Сделать воспроизведение карусели при наведении я смог, при помощи этого кода

Подложку я так же сделал, но вот ее поведение при наведении настроить к сожалению не смог. Оно работает конечно но через раз.

К остальным шагам еще не приступал.

Так что хотел бы узнать как бы реализовали это другие..?

Answer 1

[Александр Ружевич]

вы подложку каким образом реализовали? можно что бы карусель не трогать кроме как автовоспроизведение по наведении текст и подложку положить на выполнение родителем, блок в него сверху карусели положить абсолютом и при наведении что бы плавно исчезал через none а когда уберете через not:hover что бы плавно появлялся. пример появления и исчезания подложки гляньте тут duvinrouge.com (наведите на картинки wines)

Comments

[Илья Бельский]

Приветствую! Я уже отказался от owl, и решил проблему с помощью photoswipe и обычного hover)) За сайт спасибо, добавил в закладки, потом подгляжу когда подобная ситуация возникнет.