20 янв в 19:25 20 янв

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

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

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

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

{"id":198865,"url":"https:\/\/vc.ru\/design\/198865-delaem-smenu-izobrazheniya-po-hoveru-na-behance","title":"\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043c\u0435\u043d\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443 \u043d\u0430 behance","services":{"facebook":{"url":"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/198865-delaem-smenu-izobrazheniya-po-hoveru-na-behance","short_name":"FB","title":"Facebook","width":600,"height":450},"vkontakte":{"url":"https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/198865-delaem-smenu-izobrazheniya-po-hoveru-na-behance&title=\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043c\u0435\u043d\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443 \u043d\u0430 behance","short_name":"VK","title":"\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435","width":600,"height":450},"twitter":{"url":"https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/198865-delaem-smenu-izobrazheniya-po-hoveru-na-behance&text=\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043c\u0435\u043d\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443 \u043d\u0430 behance","short_name":"TW","title":"Twitter","width":600,"height":450},"telegram":{"url":"tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/198865-delaem-smenu-izobrazheniya-po-hoveru-na-behance&text=\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043c\u0435\u043d\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443 \u043d\u0430 behance","short_name":"TG","title":"Telegram","width":600,"height":450},"odnoklassniki":{"url":"http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/198865-delaem-smenu-izobrazheniya-po-hoveru-na-behance","short_name":"OK","title":"\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438","width":600,"height":450},"email":{"url":"mailto:?subject=\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043c\u0435\u043d\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443 \u043d\u0430 behance&body=https:\/\/vc.ru\/design\/198865-delaem-smenu-izobrazheniya-po-hoveru-na-behance","short_name":"Email","title":"\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443","width":600,"height":450}},"isFavorited":false}

783 просмотров

Предыстория

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

Ховер

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

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

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

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

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

Embed на bechance

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

3 3 комментария

Реклама на vc.ru Отключить рекламу

{ "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 }