Дизайн
Liudmila Kolotilina

Делаем смену изображения по ховеру на behance

Плюсы: что-то новенькое в вашем портфолио, можно "оживить" кейс

Минусы: пока получилось сделать рабочую версию только для десктопа.

(P.S. Если вы знаете, как сделать для мобайла, напишите в комментарии, буду благодарна🙏🏻)

Предыстория

Летом проходила курс по композиции от науки дизайна, и работы решила как-то оформить. Потом подумала, что просто сделать кусочки фреймов будет скучно и непонятно, хотелось добавить интерактива, так появилось изменение изображения по ховеру и верстка.

Ховер

Верстку делала в codepen, сам ховер делается за пару строчек в CSS:

Делаем вставку на behance

Когда все готово, нажимаем в codepen кнопку "embed". В окне настроек выбираем тему (тему можно настроить в расширенной версии так, что не будет видно полей), затем нужно убедиться, что нажат только "Result", затем выбираем "iframe" и копируем, все что внизу.

Теперь осталось только вставить.

На behance тоже есть кнопка "Embed", нажимаем, вставляем. Дальше, скорее всего, нужно будет подогнать высоту под необходимый размер.

Embed на bechance

Готово. А результат можно глянуть тут :)

{ "author_name": "Liudmila Kolotilina", "author_type": "self", "tags": [], "comments": 3, "likes": 13, "favorites": 35, "is_advertisement": false, "subsite_label": "design", "id": 198865, "is_wide": false, "is_ugc": true, "date": "Wed, 20 Jan 2021 19:25:52 +0300", "is_special": false }
0
3 комментария
Популярные
По порядку
2

| Теперь осталось только вставить.

Ответить
0

Ну, принцип понятен, а как сверстать проект можно нагуглить :)

Ответить
1

Интересная фишка, спасибо!

Ответить

Комментарии

null