KingComp – веб-программист
График работы: 9:00 - 18:00 Пн - Пт
Содержание страницы:
Скрипт hoverPL создает различные эффекты при наведении курсора мыши на изображение. Информационные блоки могут быть оформлены как простая кнопка «подробнее», содержать полноценное описание товара и не только. Эффект появления hoverPL можно использовать на своем сайте, он хорошо совместим с Платформой, удобен для использования.

Настройка

В раздел HEAD скопируйте стили из файла head.html.

В редакторе добавьте Блок и задайте ему class=hoverPL

оверлей при наведении на изображение

Это будет наш родительский блок (отмечена красной рамкой).

Теперь добавьте еще один Блок внутрь родительского блока и задайте ему class=overlayPL .

overlay при наведении курсора

Это будет у нас дочерний блок (отмечена синей рамкой), которая будет всплывать над родителем при наведении курсором мыши.

Вы можете поместить любое содержимое как в родительский блок, так и в дочерний прямо в редакторе Платформы. Также можете задать любые анимированные эффекты.

В конечном счете все это будет выглядеть следующим образом:

В редакторе

Всплывающая информация при наведении на картинку

При просмотре страницы (без наведения мыши)
hover при наведении на изображение

При просмотре страницы (при наведении мыши)
картинка при наведении на изображение

Примеры

Пример 1
Пример 2