1. Прежде чем приступить к настройке данной модификации необходимо загрузить желаемое изображение в Зеро-блок через элемент
image или
shape. И указываешь ему тот же class, что и в генераторе (например, imagerotation). Класс нужно прописать
для каждого элемента, к которому будет применяться увеличение.
Что бы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь class.
2. В генераторе заполняешь поля:
- «Класс» – указываешь класс элемента, к которым будет применяться эффект увеличения (например, imagerotation);
- «Размер увеличения (%)» – указываешь необходимый размер увеличения изображения в положительную сторону (больше100%) или в отрицательную (меньше 100%);
- «Скорость (ms)» – скорость анимации;
- «Угол поворота при наведении на изображения» – это поле настраивает поворот внутри контейнера;
- «Угол поворота при наведении на контейнер» – это поле настраивает поворот всего контейнера;
- «Изменить z-index при наведении» – это поле необходимо заполнять в случае, если в блоке находится несколько элементов, которые наслаиваются друг на друга (или будут наслаиваться в случае проигрывания анимации). Чем выше этот параметр тем выше будет находиться элемент по отношению к другим элементам внутри Зеро блока, во время применения эффекта увеличения;
- «Тип анимации» – выбери понравившеюся анимацию из предложенного списка.
Дополнительно, можешь
- «Включить границы (overflow)»;
- «Отключить эффект на экранах меньше 1200px»;
3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
Имей в виду:- Если настраиваешь дополнительно увеличение через sbs анимацию, увеличение не подействует и будет оставаться в рамках границ изображения при включенной настройке "Включить границы (overflow)"