Дано: есть сайт на wordpress, тама avada + elementor
Имеется на странице слайдер в виде двух вертикальных каруселей изображений
Что нужно: сделать при скролле страницы и наведению на область страницы поверх слайдера появление выезжающих блоков( квадратов слева и справа) с вводной частью материала на каждом и кнопкой подробрнее по клику на которою выезжает весь контент, при повторном клике контент сворачивается в исходное состояние. Когда убираем курсор мыши из области блоки исчезают.
Если используется Элементор, то возможно стоит слайдер сделать как бэк всего блока. А уже в самом блоке нужные секции или столбцы анимировать, присвоив им класс и описав детально все позиции по типу:
.hoversection:hover .info_block1{
transform: translateX(-100vw);
}
.hoversection:hover .info_block2 {
transform: translateX(100vw);
}
Остальное в коде расписать по своим требованиям, типа бэк, скорость трансформа (время), и т.п , я то их не знаю.
Ну а кнопку Подробнее, думаю можно на нее повесить полноразмерный попап в полокна, выезжающий сбоку по нажатию