Свойство clip-path и интересный эффект для сайта

PSD to HTML. Практика верстки сайта с нуля до результата. Смотрите уроки: webformyself.c...
Исходники к уроку тут: webformyself.c...
В предлагаемом уроке будет показан интересный эффект, который может подойти для шапки сайта или какой-то из его секций. Суть эффекта заключается в размещении нескольких изображений в секции и показе только части каждого из изображений. Другая часть при этом скрывается при помощи свойства clip-path. При наведении мыши на часть изображения - будет показана полная картинка.

[@ВлалимирЕмельянов-ь2г]

Крутой эффект. В первые его увидел)

[@hojiali2705]

[@виртуоз_ру]

Спору нет, эффект прикольный.

[@madsparrow2484]

Эффект классный, я его поставил на слайдер + gsap плагин. Но столкнулся с тем что clip-path не работает в Safari, Edge и Explorer. Для получения эффекта нужно вписывать в svg и использовать clip-path: url(#test);

[@ВасяВасилий-к5ж]

Рекламные блоки с помощью этого делают на сайтах.

[@Алексей-о9б4г]

Люблю разные эффекты, но также как и масса крутых с виду шаблонов, особо нигде не применишь. Да, и гуляя повседневно по разным сайтам, везде всё стандартно, без эффектов и мудрёных шаблонов.

[@matroskin978]

Все упирается в нашу фантазию... я в сети не раз видел подборку сайтов, которые из одних эффектов из состоят, прям один сплошной эффект)

[@privet_baget]

@@matroskin978 В большинстве своем это просто понты, чтобы показать знание верстки) В коммерческих проектах за такое по голове не погладят, а то и леща отвесят))

[@matroskin978]

@@privet_baget Возможно))

[@iamname8758]

@@privet_baget зависит от целей, эффект должен быть уместен и естественно смотреться, в большинстве сайтов, это отвлекает только и нагружает человека поэтому в моде минимализм)

[@ВладимирДоронин-о3о]

@@matroskin978 - сейчас люди тянутся к более простому оформлению сайтов, чтобы глаза не уставали. То есть - этакий "стильный минимализм" ;=))

[@PalyufishkuRuSite]

Эффект интересный, спасибо. Если бы вы в подобных видео о поддержке браузерами еще рассказывали, было бы еще лучше!

[@arturzakirov9167]

Андрей, спасибо за то, что ты помогаешь. У меня вопрос: как ты скопировал слово не выделяя его? То есть ты поставил курсор на слово и его скопировал.

[@matroskin978]

Пожалуйста)
Чтобы выделить слово, на котором стоит курсор, в Sublime Text используется комбинация Ctrl + D. Ну а для копирования - стандартное Ctrl + C.

[@arturzakirov9167]

@@matroskin978 Спасибо за ответ. Сейчас попробую

[@TheManblax]

background: url(...) no-repeat center/cover

[@matroskin978]

Мне как-то привычнее указать отдельно свойство size) Но за подсказку спасибо, честно говоря, не знал, что можно так и size поместить в background.

[@darkshaman766]

гуд ))))

[@goevgen]

Если можно, в самом начале показывай эффект который хочешь повторить. Монтаж позволяет же

[@matroskin978]

Ок, постараюсь учесть.

[@gritsienkooleg3447]

Блин, это очень офигенно!спасибо!!!

[@ruspoli4487]

Отличная штука, благодарю за урок!

[@valeron6971]

Супер ! Спасибо большое !

[@_slash_-]

Прикольно

[@ВладимирТ-ч6ц]

Хороший пример

[@sergeyreshetnikov3968]

Андрею лайк не глядя. Позже посмотрю, сейчас нет времени.

[@matroskin978]

Спасибо)

[@chuvital]

Спасибо! Красивый эффект.

[@matroskin978]

Пожалуйста)

[@luksik0]

Спасибо большое за вашу работу и хорошие идеи

[@matroskin978]

Пожалуйста ;)