Основная функция блока:
Загрузка изображений, редактирование и размещение их на сайте.

Пример:

Визуальные эффекты для картинки:
С помощью различных CSS стилей вы сможете сделать вашу картинку ярче/сочнее/интереснее. Настраивать можно как саму картинку, так и то, что находится под ней.

Примеры эффектов:

прозрачность 40%

размытие 5px

яркость 30%

контраст 180%

круг оттенков 190 deg

обесцветить 100%

инверсия 100%

насыщенность 0%

Визуальные эффекты под картинкой:
Вы можете сделать размытие под картинкой с прозрачным фоном:

Пример, когда у самой картинки прозрачный фон и включено размытие под картинкой (она размывает то, что под ней):

сама картинка

фоновая картинка секции

итог

Эффекты при наведении на картинку:
Все вышеперечисленные эффекты можно применить и при наведении на блок.

Пример. Попробуйте навести на картинку:

Текст при наведении:
Можно добавить текстовое описание, которое будет показываться при наведении.

Пример. Попробуйте навести на картинку:

Номер Люкс Номер Люкс Номер с двухместной кроватью, оснащен собственной душевой кабиной и санузлом Номер с двухместной кроватью, оснащен собственной душевой кабиной и санузлом

Обводка картинок:
Теперь у изображения можно добавить обводку — сплошную, пунктирную или точечную, настроить цвет и толщину.

Пример картинки с настроенной обводкой:

Настройки тени:
Мы улучшили готовые варианты настроек тени, а в пользовательской настройке добавили больше параметров:

Пример картинки с тенью (ручная настройка):

Блок Картинка

Действия при клике:
В новой картинке мы добавили больше различных действий при клике:

переход по ссылке 🔗
открыть всплывающее окно 📟
увеличить картинку 🔍
добавить товар в корзину 🛒
прокрутка к секции ⬇️
отправить email ✉️
позвонить по телефону 📞
показать оригинал 📂