1. Прежде, чем приступить к настройке данной модификации необходимо в Зеро-блок добавить элемент (текст, шейп, картинка или кнопка). И указать ему тот же class, что и в генераторе (например, nolimload).
Что бы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь class.
2. Далее необходимо добавить на страницу галерею GL12 и загрузить в неё изображение. Далее копируешь ссылку на него и вставляешь в генератор в указанное поле. Формат файла советуем использовать svg или png;
3. В генераторе настраиваешь следующие поля:
- «Изображение» – загружаешь ссылку на изображение, которое будет появляться при наведении;
- «Класс элемента» – указываешь class элемента, такой же как и в Зеро-блоке у элементов (например, elemClass);
- «Ширина изображения» – с указанной шириной изображение будет появляться, высота изображения будет определена с учетом соотношения его сторон;
- «Радиус скругления углов изображения»;
- «z-index изображения» – это поле необходимо заполнять в случае, если на странице находится несколько элементов, которые наслаиваются друг на друга (или будут наслаиваться в случае применения данного эффекта). Чем выше этот параметр тем выше будет находиться элемент по отношению к другим элементам, во время применения эффекта.
Дополнительно можно настроить следующие параметры:
- «Отключить стандартный курсор при наведении на элемент»;
- «Отключить эффект на экранах меньше 1200px».
Если данный эффект требуется применить
к нескольким элементам и с разными изображениями, то ниже под генератором, можно нажав на кнопку
«Добавить изображение» раскрыть новые поля и добавить еще одно изображение. Обратите внимание, что в таком случае class у данных элементов
должен быть разный.4. Копируем сгенерированный HTML код и вставляем его в блок Т123;