10 бібліотек CSS для покращення ефектів наведення зображень
Дозвіл користувачам легко і чітко знати, яку частину веб-сторінки можна натискати є важливою частиною дизайну UX. Старий, але золотий спосіб зробити це - змінити колір тексту і підкреслити його. В даний час, з CSS, є ще багато способів доставити ефекти наведення, особливо для зображень.
Розробники тепер можуть додавати ефекти переходу або анімацію під час запуску події наведення. Ми дивимося на направляючі слайди, збільшуючи їх з різною швидкістю, плавними ефектами та ефектами зникнення, ефектами шарнірів, прожекторами, колебаннями, відскоком та іншим.
У цій компіляції є більше 250 ефектів наведення щоб надихнути вас. Ви також можете підібрати код у джерелі.
Ефекти наведення зображень (16 ефектів)
На цій сторінці ви знайдете чудову колекцію з 16 ефектів наведення зображень із заголовками. Візьміть HTML і CSS код для кожного ефекту, наведіть курсор на зображення, а потім клацніть Показати код.
Анімація підпису на зображенні (4 ефекти)
Ось 4 прохолодні анімації заголовків, які запускаються, коли один витає над зображенням. Ефекти побудовані з чистими переходами і перетвореннями CSS3, і без JavaScript, щоб збільшити сумісність через браузер.
iHover (35 ефектів)
iHover - це набір ефектів наведення курсора на CSS3. Є 20 ефектів наведення в колі і 15 ефектів квадратного наведення. Щоб скористатися ефектами, вам потрібно буде написати певну розмітку HTML і включити файли CSS.
Наведіть зображення (44 ефекти)
Ця бібліотека містить 44 ефекти, зроблені з чистим CSS. Деякі з цих ефектів включають затухання, натискання, слайди, петлі, розкриття, масштабування, розмивання, перевороти, складки та жалюзі в декількох напрямках. Є розширена версія 216 ефектів, які можна купити за € 14.
Ідеї ефекту наведення (30 ефектів)
Цей демонстраційний ролик, створений компанією Codrop, дає вам натхнення під час плавних переходів між зображеннями та підписами. Всього є два ефекти на двох наборах з підручниками та вихідним кодом.
Наведіть CSS (108 ефектів)
Наведіть CSS дозволяє додавати ефекти наведення на будь-який елемент, наприклад, кнопку, посилання або зображення. Ефекти включають 2D переходи, фонові переходи, межі, переходи Shadow і Glow тощо. Бібліотека доступна в CSS, Sass і LESS.
Аніматізм (100+ ефектів)
Є більше 100 анімацій наведення зображень до кнопок, накладок, деталей, підписів, зображень і кнопок соціальних мереж. Всі ефекти працюють на CSS3.
Ефект Caption Hover (7 ефектів)
Є 7 різних ефектів у цій колекції. Всі переходи виглядають дуже приємно і гладко. Перейдіть до розділу підручника, щоб дізнатися, як застосувати ці ефекти до вашого проекту.
Ефекти наведення зображень CSS (15 ефектів)
Колекція простих ефектів наведення, таких як масштабування, слайд, поворот, сіра шкала, розмиття, непрозорість та інші основні ефекти. Ці ефекти можна використовувати, додавши клас CSS перед вашим цифра тег.
Ефект 3D-навігації, спрямований у напрямку
Це дуже прохолодний ефект наведення, який виявить ваш останній рух миші. Підписи до зображень відкриваються з одного з чотирьох напрямків на основі вашої останньої позиції курсора.
Анімація наведення
Нижче наведена анімація наведення кордонів, натхненна UNIQLO. Після події наведення, межа зображення стане анімованою.
Плитки з анімованим наведенням
Один для дизайну плитки, цей має повільний зум, слайди, поп-ins, затемнене накладення серед інших.
Ефект кліпу на шляху SVG
Супер дивовижний ефект рентгенівського прожектора зображення, що проходить через SVG кліп-шлях і переходи CSS. Відмінно працює на Chrome, Opera та Safari.
