Я создаю новую блог-галерею для клиента, используя elementor и wordpress. Изображения клиента для каждого соответствующего блога содержат водяной знак нижнего колонтитула для каждого изображения. Клиент желает скрыть водяной знак нижнего колонтитула в представлении галереи. Когда пользователь взаимодействует с изображениями (при нажатии), активируется лайтбокс, а затем отображается полное изображение, включая ранее скрытый нижний колонтитул. Высота всех изображений различается по размеру (см. Ниже), но экономия заключается в том, что нижний колонтитул и ширина остаются одинаковыми по всему размеру (см. Ниже).
Поскольку я создал отдельный пост в качестве шаблона в elementor, галерею можно отобразить через
- Опубликовать контент (elementor), который вытащил именно из WP
- Виджет галереи изображений (elementor), который можно динамически связать с вложенными файлами.
Я настроил оба элемента, упомянутых выше, и использовал следующую CSS:
{
position: absolute;
clip: rect(0, 915px, 609px, 0);
}
Это создает желаемый эффект только для определенных изображений, НО, выравнивание полностью отсутствует.
Если я удаляю POSITION из css и активирую POSITION в виджете elementor, выравнивание исправляется ОДНАКО из всего, что было под ним, т.е. другой раздел теперь отображается непосредственно позади или поверх него, в зависимости от z-index.
Как можно автоматически скрыть водяной знак нижнего колонтитула для всех изображений в галерее с различными размерами?
Различные размеры изображения:
* footer = 80px
* w x h
* 915x689px
* 915x784px
* 915x1453px