3D эффекты для миниатюр при наведении курсора мыши


Содержание

www.knowledgeacademy.ru

Успех — есть движение!

Авторизация

Регистрация нового пользователя

Создаём впечатляющий 3D эффект при наведении мыши на миниатюру изображения

Быть первым, значит быть оригинальным. Сегодня мы будем учиться украшать миниатюры изображений с помощью 3D преобразований CSS3 и jQuery. Вам стоит это увидеть, поехали?

Сегодня, мы хотим показать вам, как создать неповторимый 3D эффект при наведении на миниатюру изображения, с помощью CSS3 и jQuery. Идея создания, навеяна проектом Google SketchUp Showcase.

В наших примерах, мы будем использовать миниатюры изображений, при наведении на которые, кроме потрясающего 3D эффекта, мы увидим дополнительную информацию о них, с возможностью, при клике мыши просмотреть их в исходном разрешении. Мы создадим необходимую разметку, и напишем некоторый jQuery код, который и будет применять все необходимые 3D эффекты к нашим изображениям, во время наведения на них курсором мыши.

Обращаю ваше внимание: увидеть всю красоту данных эффектов, вы сможете лишь в тех браузерах, которые поддерживают соответствующие свойства CSS.

Изображения для демонстрационных примеров предоставлены Angelo González и находятся под лицензией Creative Commons Attribution 2.0 Generic (CC BY 2.0)

Чтобы не ввести вас в затруднительное положение, все префиксы в данном уроке были убраны. Но вы всегда их сможете найти в файлах демонстрационных примеров.

Разметка

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

Каждый блок с миниатюрой, будет содержать в себе блок с классом view-back, в котором будут находиться необходимые детали описания. Для работы нашего jQuery скрипта, блок с классом view будет иметь следующую структуру:

Поскольку мы используем вложенную структуру, для каждого блока с миниатюрой slice, мы будем использовать изображение как фон, что позволить лучше контролировать эффект. Кроме того, мы добавим диапазон наложения, чтобы эффект получился реалистичнее.

jQuery

Используемая нами jQuery функция, в этом случае будет иметь следующий вид:

Теперь мы можем использовать много забавных эффектов наведения! Для начала, давайте определимся с некоторыми общими стилями, а затем рассмотрим первый пример.

CSS

Здесь мы определим некоторые стили для блока view, а так же перспективу для него:

Блокам slice так же нужны некоторые свойства 3D преобразований и переходов:

Пришло время задать необходимые стили для описания, которое мы увидим, наведя курсор мыши на любую из миниатюр:

Не забудем и про блоки span и стили для ссылок:

Для значка before, мы будем использовать шрифт — значок, который мы создали с Fontello. Поскольку мы добавили атрибут data-icon к тегу span, для его отображения будет использоваться псевдо класс :before:

Всё за исключением первого блока с классом slice, мы должны перенести вправо (помните, мы используем вложенную структуру):

Давайте настроим позиционирование каждого фонового изображения для блоков с классом slice:

Наложения (overlays) по умолчанию будут иметь непрозрачность 0, а при наведении курсора мыши, мы изменим это значение до 1:

Для изображений, давайте исправим z-index (так, чтобы не было видно нижележащего слоя и изнанки). Мы так же добавим замену переходов для браузеров, не поддерживающих свойства CSS 3D преобразований:

В случае если мы видим, что браузер не поддерживает необходимые 3D свойства, мы просто загрузим дополнительные таблицы стилей fallback.css, которые будут иметь следующее содержание:

Это позволит переместить изображение влево, при срабатывании события hover.

Настало время примера!

Пример

В этом примере, мы хотим создать эффект складок, как в демонстрации 1. Для этого мы будем корректировать значения перспективы и переходов:

2, 3, 4 и 5 блоки slice, для создания эффекта складок, используя поворот в 3D, мы преобразуем так:

Каждый из этих слоёв, будет перемещён влево. Это значение должно быть равным их ширине, но мы хотим избежать даже небольших не состыковок, поэтому переместим их на 59 пикселей. Второй slice будет повёрнут на -45 градусов, для поворота влево. Четвертый, будет повёрнут в противоположную сторону, а третий и пятый, на 90 градусов. Помните, мы используем вложенную структуру. И как только мы повернём родительские блоки, дочерние так же будут повёрнуты.

Чтобы наш эффект выглядел реалистичнее, мы добавим некоторые наложения градиентов:

Нижний слой миниатюры с дополнительной информацией, во время события наведения мыши, так же получит градиент для фона, поскольку мы хотим имитировать падающую тень от изображения:

Вот и всё! Просмотрите все демонстрационные примеры, чтобы оценить всю прелесть созданного эффекта! Существует масса возможностей создать новые эффекты или улучшить существующие.
Я надеюсь, вы нашли эту статью вдохновляющей!

Для интеграции данного примера с сенсорными гаджетами, вы можете использовать версию Richard Bennett.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта — это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /

23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.

110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.

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

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки — это самый действенный и дешевый метод рекламы в Интернете.

Css пример эффекта при наведении мыши. Вращение миниатюр при наведении. Простые примеры для кнопок

Вы конечно же видели на некоторых сайтах запрет на использование правой кнопки мыши. Эта функция прежде всего борется с теми, кто хочет украсть ваш контент. Полностью от воровства вас не защитит эта мера, но от ручного копирования вполне. Другие варианты .
Не рекомендую отключать правую кнопку мыши, если вы выкладываете в своем блоге материалы, предназначенные для копирования. Это могут быть коды, скрипты, кулинарные рецепты, справочные материалы и другое. Запрет на копирование в данном случае отвернет от вас посетителей, и ваш блог станет менее полезным для посетителей. Если вам важна защита от плагиата, то тогда лучше используйте добавление вашего url в конце копии. Тогда вы будете уверены, что если кто-то захочет опубликовать в другом месте в интернете, скопированное у вас, то копипастер с большей вероятностью поделится ссылкой на ваш блог.
Этот рецепт подходит для любого веб-сайта. Вам нужно лишь вставить код на все страницы вашего блога:

Автор: Иванова Наталья

2020-03-03

Приближается праздник — Международный женский день. Подготовимся заранее к нему. Вы можете оригинально поздравить девушек и женщин, воспользовавшись сервисами открыток, о которых пойдет речь ниже.

Вы можете воспользоваться теми же сервисами, какими мы пользовались для .

Сервисы готовых открыток

Создать открытку 8 марта онлайн

Воспользуйтесь следующими сервисами, чтобы создать открытку практически с нуля.

  1. Canva — известный многим функциональный фоторедактор. Здесь вы найдете множество шаблонов. Нужна регистрация.
  2. Printclick Если у вас свой бизнес, то вы можете заказать партию открыток с логотипом и контактами своей компании. Воспользоваться же вы можете генератором открыток princlick. Отличная рекламная акция и недорого.
  3. Crello — редактор, в котором нужна регистрация. Не пугайтесь английского языка, в настройках можно переключится на русский.
  4. Онлайн-открытка — для тех, у кого хорошо развита фантазия, так как создавать открытку придется с чистого листа.
  5. Mumotiki — подготовьте красивую картинку, а поздравительный текст вы сможете добавить здесь. Кстати, если вам нужно просто добавить текст на картинку, то вы можете ознакомиться с .

Я надеюсь, что воспользовавшись одним из этих генераторов, вы сможете достойно поздравить своих дам с 8 марта!

Автор: Иванова Наталья

2020-02-17

Google Plus закрывается

После объявления о прекращении работы API Google+, которое запланировано на март 2020 года, 4 февраля будет внесен ряд изменений в интеграцию Blogger с Google+.
Виджеты Google+. В дизайне блогов больше не будут поддерживаться виджеты «Кнопка +1», «Подписчики Google+» и «Значок Google+». Из вашего блога будут удалены все экземпляры этих виджетов.
Кнопки +1. Будут удалены кнопки +1 и G+, а также ссылки «Опубликовать в Google+» под записями в блоге и на панели навигации.
Обратите внимание, что, если вы используете пользовательский шаблон, в котором есть функции Google+, его может быть необходимо изменить. Обратитесь за рекомендациями к тому, кто предоставил вам этот шаблон.
Google+ Комментарии. Будет прекращена поддержка комментариев с использованием Google+, а для всех блогов, которые используют эту функцию, будут восстановлены стандартные комментарии Blogger. К сожалению, комментарии, размещенные через Google+, невозможно перенести в Blogger, поэтому они больше не будут отображаться в вашем блоге.

Удаление комментариев Google Plus

Как заменить профиль гугл плюс профилем Блоггер

Как вернуть профиль Blogger

Подтвердите переход на и задайте свое имя или никнейм.

Цукерберг рекомендует:  Javascript - Создание игры на javascript виселица

Не забудьте загрузить аватар в вашем профиле Blogger.

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:


2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

Красивые эффекты при наведений мыши CSS3 — Второй урок

Во-втором примере мы добавим специальный класс view-second. Затем переделаем немного структуру html-кода обернем описание в класс content, а блок с классом mask оставим пустым.

Перепишем стиль для маски.

Добавляем стили для события Hover

Что будет происходить?

  • При наведение на элемент будет накладываться маска
  • После наложения маски будут накладываться остальные элементы

3D эффекты для миниатюр при наведении курсора мыши

Сборник HTML, CSS, JavaScript/jQuery компонентов

Коллекция потрясающих эффектов для изображений | HTML, CSS и JavaScript (jQuery)

Эффекты для изображений — здесь мы собрали и продолжаем регулярно обновлять коллекцию бесплатных готовых решений для изображений, созданных при помощи HTML и CSS (CSS3 & HTML5), а также в некоторых эффектах немного присутствует JavaScript (jQuery). Hover-эффекты (эффекты при наведение), 3D, zoom (увеличение), magnify, overlay, transition… Сразу на странице Вы можете просмотреть Демо и скачать исходный код (* zip).

10 простых эффектов при наведении без плагинов.

Приветствую вас, дорогие друзья!

В этой статье я покажу вам 10 простых эффектов при наведении, для реализации которых не нужно устанавливать какие-то дополнительные плагины, модули, подключать библиотеки. Данные эффекты можно реализовать абсолютно на любом сайте, не зависимо от того, на какой CMS он у вас работает, и для этого практически не нужно вникать в код.

1. CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

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

  1. 1. Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.
  2. 2. Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.

Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

Затем разворачиваем дополнительные настройки, и здесь мы можем дописать дополнительный CSS-класс. После чего нажимаем на кнопку «Обновить».

Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

После чего нажать на кнопку «Обновить файл» внизу страницы

Для того, чтобы у нас определённые CSS-свойства работали при наведении, нам необходимо использовать псевдокласс :hover.
CSS-стили, которые написаны для этого селектора будет работать только в том случае, когда на элемент наведен указатель мышки.

box-shadow – данное CSS свойство отвечает за добавление тени. Более подробно об особенностях этого свойства и значении его параметров я писала в этой статье.

Далее для того, что бы эффект был более плавным, мы используем CSS-свойство transition. И здесь у нас указывается задержка в секундах, то есть, насколько плавно будет происходить смена CSS-эффектов.

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

Эффект css при наведении на картинку – Как изменить картинку при наведении на нее курсора или немного о hover-эффектах : WEBCodius

13 hover эффектов при наведении на jquery

1. Плагин «Photo Zoom»

2. jQuery эффект при наведении

Плавный переход от монохромного изображения к цветному при наведении курсора с использованием jQuery.

3. Hover-эффект с помощью CSS и jQuery

Эффект замены фотографий при наведении курсора мышки. Фотографии представлены в виде спрайтов (несколько фото, объедененных в одну).

4. Анимированный эффект при наведении

jQuery эффект: элемент затемнен до тех пор пока на него не будет наведен курсор мыши. Отличный способ заострить внимание посетителя на каком-нибудь элементе на странице.

5. Смена изображении при наведении курсора мыши с использованием jQuery

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

6. CSS анимированный эффект при наведении

Смена изображений при наведении. Эффект не поддерживает IE.

7. Эффект при наведении с использованием CSS спрайтов и jQuery

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

8. jQuery плагин «jQueryZoom»

С помощью этого плагина вы сможете добавить эффект увеличения изображения при наведении или добавить наложение на него. Плагин легко настроить для ваших нужд.

9. Смена изображений при наведении

Смена изображений при наведении курсора мышки. Вы легко сможете найти применение этому jQuery плагину в интернет-магазинах и каталогах.

10. jQuery эффект плавного изменения цвета при наведении

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

11. Плагин jQuery «Hover Image Zoom»

Увеличение изображения при наведении курсора. Эффект приближения.

12. jQuery анимация при наведении


Можно использовать для реализации навигации. Эффект анимации в двух вариантах: с отбрасываемой тенью и с отражением.

13. jQuery эффект при наведении «Images Hover Cycle effect»

Оригинальные hover-эффекты для изображений на чистом CSS3

Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3.
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.

Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

Дабы не ломать общую картину, не стал коверкать машинным переводом названия эффектов(за исключением некоторых), оставил оригиналы заголовков такими, как их обозвал разработчик.

Hover Effect Ideas

Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.

iHover

iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.

Caption Hover Effects

Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.

Эффект перехода CSS3

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

Hover-эффекты для миниатюр на CSS3

Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.

Circle Hover Effects

Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.

Вращение миниатюр при наведении

Простой эффект вращения круглых миниатюр при наведении на них курсора мыши, примерно такой же вы можете видеть у меня на блоге, в анонсах записей на главной. Реализуется парой-тройкой строк кода css.

Sexy Image Hover Effects

Если перевести дословно:»Сексуальный эффект при наведении на изображения«. Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.

5 Hover-эффектов на CSS3

Пять различных эффектов для изображений при наведении на них. Всплывающие подписи в трёх вариациях, шторки в виде смены степени прозрачности и вращение с перемещением по горизонтали.

Анимация подписей изображений

4 Вида эффектов анимации подписей изображений, реализованных исключительно средствами CSS3. Разные позиции при появлении и эффекты переходов, вполне себе стандартное исполнение. Чтобы понять, как работает анимация, загляните в исходный код демо-страницы, отдельной документации не обнаружил.

Hover-эффекты с элементами анимации

Выстроенные в сетку галереи миниатюры с различными эффектами появления подписей, вращение, проявление, всплытие и т.д. Документация по использованию и настройке довольно скудна, но при особом желании разобраться можно.

Изменение яркости картинок

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

10 Image Hover Effects

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.

Border Animation Effect

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

Original Hover Effects With CSS3

Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.

Shape Hover Effect

Идея состоит в том, чтобы создать SVG, который представляет собой форму-фон для какой-то надписи и превращается в другую форму при наведении курсора мыши. Таким образом можно сделать множество разных вариантов, в примере же, показаны три вида эффектов переходов. Достоинством использования SVG является то, что мы можем изменить размер формы в соответствии размеров родительского контейнера.

Раздвижные изображения

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

Slick CSS3 Animated Image

С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.

Всплывающая подпись при наведении

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.

Диагональное появление подписи

Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.

Анимированные заголовки миниатюр

Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.

Подчёркнутые или очерченные подписи к миниатюрам

Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.

Причудливые формы и zoom-эффект

Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.

Наложение иконки на изображение

Замечательные эффекты наложения иконки на миниатюры изображений в различных вариациях появления. В примере использован символ (+) очерченный кругом с помощью border-radius: в CSS, так же можно использовать шрифт-иконки, для большей информативности всплывающей панели.

Слайд-эффект для подписей изображений

Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.

6 Подписей к картинкам

6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.

Ну и наконец, напоследок так сказать, не могу не упомянуть о самом простейшем способе создания всплывающей подписи к миниатюре с помощью CSS3.

Оригинал статьи здесь

33 CSS3 эффекта при наведении, о которых вы должны знать

Применение различных hover эффектов CSS при наведении курсора на изображение, ссылку или текст является одним из наиболее распространенных методов CSS.

В этой статье я собрал много интересных эффектов CSS3, проявляющихся при наведении курсора мыши. Вы можете легко применить их на своем сайте или других веб-проектах. Давайте посмотрим, что я для вас приготовил.

1. 10 Stylish Hover Effects

Как следует из названия, это коллекция из 10 невероятно стильных эффектов наведения.

2. Direction-aware Hover Effect

Когда вы наводите указатель мыши на различные элементы, CSS hover эффект при наведении следует за курсором и создает удивительные 3D презентации.

3. Wacom Hover Effect

Это уже довольно избитый эффект, но многие люди все равно с удовольствием его используют. Презентация является простой, но привлекательной.

4. CSS3 Hover Effects

Если вы ищете круговые эффекты наведения, здесь вы найдете несколько интересных. В общей сложности доступно 12 различных CSS hover эффектов рамки.

5. Hover Animation from UNIQLO

Это еще один интересный эффект наведения. Он идеально подойдет для миниатюр или других типов изображений.

6. Button Hover Effects

А вот несколько впечатляющих эффектов наведения для кнопок. Все они прекрасно подойдут для сайтов любого типа.

7. 10 Stunning Hover Effects


Еще один набор из 10 hover эффектов CSS для кнопок. Большинство из них довольно впечатляющие.

8. CSS3 Hover Effects 2

Это коллекция, состоящая из четырех различных эффектов наведения на изображение. Вместе с эффектом отображаются его название и описание.

9. Bounce on Hover

Это забавный и интересный эффект наведения для изображений. Круглая рамка идеально подходит для применения к аватаркам участников команды, изображений рекомендаций.

10. 8-bit Hovers

Этот стильный винтажный hover эффект CSS вызовет в вас чувство ностальгии. Вы можете использовать его, чтобы создать ретро стиль для сайта.

11. Simple Title Hover Effect

При наведении курсора мыши на изображение этот эффект выводит заголовки на фоне с низкой непрозрачностью.

12. Flip Down Effect

Это еще один простой, но очень красивый CSS hover эффект при наведении. При наведении курсора мыши на изображение он выводит название и описание с помощью смарт-эффекта перелистывания.

13. Curiosity Award

Пока вы не наведете курсор мыши на изображение, вы не поймете красоту этого эффекта. Случайные линии красиво превращаются в логотип, а затем он раскрашивается цветами.

14. Image Hover Effect

Это невероятный CSS hover эффект рамки для изображений. Способ, с помощью которого одно изображение проявляется на фоне другого, невероятен!

15. Hover Animation

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

16. Hover Me Brother

Возможно, это и не очень полезный hover эффект CSS, но забавный. Просто наведите курсор мыши на солнцезащитные очки, и начнется магия.

17. Nautilus SCSS HAML Hover Effects

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

18. SVG Border Hover Effect 1

Подойдет для текста, кнопок или изображений. Постепенное воссоздание рамки — это действительно интересный эффект.

19. Hover Search Map Icon

Вам нужен CSS hover эффект при наведении для панели поиска или иконки карты? Это именно он. Его бесшовные преобразования — сплошное удовольствие для глаз.

20. Social Icon Pane

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

21. Product Item Additions Info

Это отличный способ предоставления дополнительной информации о товарах в интернет-магазине. При наведении курсора на изображение продукта с помощью красивого эффекта отображается информация о нем.

22. Animated Envelope

Идеальный CSS hover эффект при наведении для раздела «Связаться с нами«. Он отображает контактную информацию в раскрывающемся конверте, но только после того, как пользователь наведет курсор мыши на изображение.

23. Back to Top

Этот уникальный эффект наведения для кнопки «Вверх» позволяет предоставить посетителям красивый, анимированный указатель.

24. Fancy Hover

При наведении курсора мыши на изображение, оно не только увеличивается, но и изменяется способ его отображения.

25. Reminders Icon Hover Effect

Этот hover эффект CSS добавляет к изображению красивые стили.

26. Circle Image Hover

Эффект наведения для круговых изображений. В коллекции присутствует четыре различных стиля эффектов наведения.

27. Safari Icon Hover Effect

Этот CSS hover эффект при наведении воссоздает анимацию иконок Safari. Вы можете заменить значок собственным изображением или логотипом.

28. Simple Button Hover

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

29. 3D Photo Effect Fold

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

30. 3D Thumb Image Hover Effect

Это поистине уникальный CSS hover эффект рамки. При наведении курсора мыши он «кладет изображение на землю«.

31. Background Change CSS

Этот эффект изменяет фон при наведении курсора мыши на кнопку. Немного поэкспериментировав, можно легко реализовать его на своем сайте.

32. Direction Aware Hover

Это еще один CSS hover эффект при наведении, выделяющий путь перемещения курсора мыши. При наведении указателя он добавляет затемнение на изображения. И это затемнение следует за курсором.

33. SVG Hover Animation

Эти красивые эффекты наведения выглядят очень интересно. Анимация и масштабируемость SVG-изображений делают их идеальными для любого типа сайтов.

Заключение

Что вы думаете об описанных мною hover эффектах CSS? Какие из них понравились вам больше всего? Напишите об этом в комментариях.

Перевод статьи «30+ CSS3 Hover Effects You should be Familiar With» был подготовлен дружной командой проекта Сайтостроение от А до Я.

33 hover-эффекта на CSS3, о которых следует знать каждому

Сегодня я хочу поделиться с вами подборкой, состоящей из 33 hover-эффектов, основанных на CSS3.

1. 10 Stylish Hover Effects

Как уже понятно из заголовка, здесь вы найдете коллекцию, состоящую из 10 невероятно стильных CSS эффектов:

2. Direction-aware Hover Effect

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

3. Wacom Hover Effect

Несмотря на то, что этот эффект можно по праву считать самым распространенным, он по-прежнему способен привлекать внимание:

4. CSS3 Hover Effects

Если вам нужны круговые эффекты на CSS3-коде, то вы попали в нужное место! Здесь их целых 12 штук!

5. Hover Animation from UNIQLO

Еще один интересный CSS эффект при наведении курсора, который позволит создать невероятно привлекательные миниатюры или украсить любые изображения:

6. Button Hover Effects

Предлагаем вашему вниманию несколько эффектов при наведении на кнопки. Все они достаточно привлекательны, и идеально подойдут для сайтов любого типа:

7. 10 Stunning Hover Effects

Еще один набор, состоящий из 10 различных CSS3-эффектов. Большинство из них очень впечатляющие:

8. CSS3 Hover Effects 2

Данная коллекция включает в себя четыре различных эффекта при наведении на картинку CSS. Каждый эффект раскрывает заголовок и описание:

9. Bounce on Hover

Забавный и интересный эффект при наведении курсора на изображения. Он хорошо подойдет для раздела отзывов или списка сотрудников с их фотографиями:


10. 8-bit Hovers

Эффект, выполненный в винтажном стиле, который точно напомнит вам о прошлом!

11. Simple Title Hover Effect

Несмотря на название, это непросто эффект. Он показывает заголовки и слегка изменяет уровень прозрачности при наведении курсора:

12. Flip Down Effect

Еще один простой, но очень привлекательный CSS эффект. При наведении курсора мыши на изображение оно переворачивается, раскрывая пользователю заголовок и описание:

13. Curiosity Award

Пока не наведете курсор на картинку, не поймете всей красоты эффекта. Бессистемные линии моментально выстраиваются в логотип, который тут же оформляется цветом:

14. Image Hover Effect

Должен признать, что это самый интересный CSS hover эффект при наведении. Просто невероятно, как одно изображение раскрывает другое!

15. Hover Animation

Очень простой эффект, который все равно способен впечатлить. Наведение курсора на изображение приводит к незначительному изменению уровня прозрачности и смещению фокуса внимания на ссылку:

16. Hover Me Brother

Возможно, это не самый практичный эффект, однако он точно забавный! Наведите курсор на солнцезащитные очки, и начнется магия!

17. Nautilus SCSS HAML Hover Effects

Вам обязательно стоит опробовать каждый из них, так как все они помогут сделать изображения уникальными!

18. SVG Border Hover Effect 1

Этот уникальный hover CSS эффект отлично подойдет для текста, кнопок или картинок:

19. Hover Search Map Icon

Не знаете, как украсить иконки поиска или карты? Тогда это решение для вас! Плавные трансформации будут приятны любому глазу:

20. Social Icon Pane

Эффект отлично подойдет для скрытия кнопок социальных сетей, которые будут отображаться лишь при наведении курсора:

21. Product Item Additions Info

Этот CSS эффект поможет привлекательным образом отобразить дополнительную информацию о товарах в интернет-магазине:

22. Animated Envelope

Идеальный эффект при наведении для раздела контактов. Этот анимированный конверт отображает контактную информацию на развороте. Но происходит это только после наведения курсора:

23. Back to Top

Уникальный эффект при наведении, который позволяет заменить традиционную кнопку “Вверх” на анимированную:

24. Fancy Hover

Здесь представлено сразу два эффекта. Кроме увеличения картинки эффект также изменяет область отображения при наведении курсора на изображение:

25. Reminders Icon Hover Effect

Этот CSS эффект для сайта был разработан под вдохновением от видео, посвященного OS X Yosemite:

26. Circle Image Hover

Еще один круглый эффект, применимый к круговым изображениям. Здесь представлено четыре различных hover-стиля:

27. Safari Icon Hover Effect

Этот эффект представляет собой воссоздание анимации иконки браузера Safari. Можно без труда заменить иконку собственной картинкой или логотипом:

28. Simple Button Hover

Этот простой CSS эффект можно применить как к кнопкам, так и к картинкам. Небольшое количество подсветки позволит представить картинки на странице в лучшем свете:

29. 3D Photo Fold Effect

Если вы работаете над площадкой для размещения фотографий или картинок, то этот эффект может пригодиться. При наведении курсора изображение складывается в забавной манере, раскрывая при этом дополнительную информацию:

30. 3D Thumb Image Hover Effect

Интересный эффект, который можно применить к изображениям на сайте. Он как бы разглаживает изображение при наведении курсора:

31. Background Change CSS

Этот интересный CSS эффект при наведении позволяет изменять фон при наведении курсора на кнопку:

32. Direction Aware Hover

Еще один эффект при наведении, ориентированный на движение. Он позволяет слегка изменить уровень прозрачности изображения, как только на нем окажется курсор мыши:

33. SVG Hover Animation

Эти красивые hover CSS эффекты устроены довольно интересно. Настоящая анимация и масштабируемые SVG-картинки позволяют использовать подобные эффекты на сайтах любого типа:

В завершение

Это, пожалуй, лучшие эффекты, созданные с помощью CSS3, которые мне удалось найти. Как они вам? Какие из них вы планируете использовать в собственных проектах? Напишите об этом в комментариях.

Перевод статьи “30+ CSS3 Hover Effects You should be Familiar With” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Эффекты для ссылок, картинок и блоков на Вашем сайте с JQuery и CSS3

Привет, друзья. Сегодня представляю Вам очередную подборку разнообразных полезностей, которые можно скачать и использовать на сайте. Тут Вы сможете бесплатно скачать такие штуки как анимированные логотипы, множество эффектов для ссылок на Вашем сайте, а так же несколько классных и креативных эффектов для изображений и блоков на сайте.

Потрясающие эффекты CSS3 при наведении

В этом уроке мы создадим 7 видов эффектов CSS при наведении курсора мыши на ссылку или изображение. Сейчас мы может делать круглые формы изображений и блоков с помощью свойства border-radius, не используя при этом изображения. Но куда более интересным становится интерактивное изображение или ссылка, которая изменяется при наведении. Стандартное изменение цвета в CSS ссылки при наведении очень банально. Поэтому сегодня мы рассмотрим действительно необычные эффекты.

Пример можно увидеть здесь:

Посмотреть примерСкачать

Потрясающие эффекты CSS3 при наведении курсора

В демо есть 7 примеров с разными эффектами. Будем рассматривать их по порядку.

Пример 1

HTML часть

Структура HTML в данном случае выглядит следующим образом:

CSS часть

А эффект — это появление внутреннего круга с текстом и прозрачным фоном. Для него будут следующие стили:

Пример 2

HTML часть

Структура HTML точно такая же как и в первом примере.

CSS часть

А вот CSS отличается, так как здесь другой эффект(круг закрашивается снаружи), также используем другие изображения:

Пример 3

HTML часть

В данном случае структура несколько иная, потому что у нас есть две части формы: та что мы видим изначально, и та, которая показывается при наведении:

CSS часть

Эффект здесь также интересный: изображение как бы прибито гвоздиком, и при наведении съезжает вниз одна часть:

Пример 4

HTML часть


Как и в предыдущем примере здесь есть две части формы: видимая и невидимая. Поэтому HTML структура очень похожа:

CSS часть

Очень красивый эффект поворота внутренней части:

Пример 5

HTML часть

Структура точно такая же, как в прошлом примере, здесь также есть видимая и невидимая часть формы.

CSS часть

Суть эффекта состоит в следующем: внутренний круг уменьшается и заменяется содержимым с текстом:

Пример 6

HTML часть

В HTML всё точно также, как и в прошлых двух примерах, поэтому ничего не меняем.

CSS часть

При наведении на данный блок, видимая часть смещается вниз и мы видим текст, который находится за видимой частью:

Пример 7

HTML часть

Здесь опять же ничего не меняем, оставляем как в прошлом примере.

CSS часть

В этом примере используется 3D преобразование и смотрится оно очень красиво:

Вывод

Мы рассмотрели 7 очень красивых и оригинальных эффектов, которые можно использовать на своём сайте. Я очень редко встречаю подобные вещи на сайтах. Они придадут вашему сайту оригинальность и неповторимость, но только не переборщите с ними, чтобы все эти преобразования не мешали посетителям просматривать ваш сайт.

Тренды дизайна: инновационные эффекты при наведении курсора мышки

Куда бы вы ни посмотрели в интернете – везде увидите потрясающий анимационный эффект. Если анимация была обязательным элементом дизайна 2020 года, то инновационные эффекты «наведения» — это будущий дизайнерский тренд-2020.

Частично благодаря популярности руководств Apple по анимации, hover-эффекты возвращаются, с акцентом на небольшие движения. Но вместо мигающих, подпрыгивающих и вращающихся эффектов прошлого, анимация стала простой и восхитительной одновременно. Она помогает пользователю и улучшает UX.

Эффекты при наведении могут варьироваться от широкого движения, которое меняет картинку на экране, до навигационного элемента.

Сегодня рассмотрим все эти варианты по отдельности.

Движение на главной странице

Эффекты при наведении могут быть ключевой частью пользовательского опыта. С анимацией, которая заполняет экран, дополнительные hover-эффекты создают очаровательную пару.

Haus, выше, замечательно справляется с этим, используя героев мультфильмов, которые перемещаются по экрану. При наведении мышки каждый персонаж выполняет действие, а без него – просто дефилирует по экрану.

При работе с полноэкранной анимацией, такой как эта, хитрость заключается в том, чтобы восхищать пользователей. Это довольно сложно. Нужно позаботиться о том, чтобы остальная часть экрана была максимально простой – чистый фон, шрифт без засечек. Анимация должна быть единственным трюком на экране, который побуждает пользователей взаимодействовать, прежде чем перейти дальше. Иначе вы просто утомите человека.

Эффекты кнопок

Простая анимация может побудить пользователя нажать на кнопку. И это одна из причин, почему этот тип анимации так популярен.

Создайте такой эффект на кнопке, который поможет пользователям лучше понять дизайн. В примере выше показано, как кнопка меняет цвет и сообщает пользователям, что произойдет после клика. Это полезная и функциональная анимация, которая еще и отлично выглядит.

Галереи и слайд-шоу

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

Ключ к проектированию современной анимации можно получить прямо из руководства по Material Design:

Движение должно быть быстрым

Движение должно быть понятным

Движение должно быть связным (без рывков)

Отличная анимация – это когда движение происходит таким образом, что пользователь не спрашивает, что будет дальше, грань между элементами контента очевидна, все происходит плавно, одним потоком.

Навигация и меню

Самый популярный элемент дизайна. Большие фрагменты анимации или эффекты наведения помогают пользователям лучше ориентироваться в контенте, и перемещаться по сайту.

С помощью значков-гамбургеров анимация пунктов меню может стать сильным направленным инструментом.

Oxen Made использует анимацию наведения на главной странице двумя способами, чтобы направлять пользователей к нужным действиям. «Меню» меняет цвет при наведении, чтобы пользователи знали, что оно является кликабельным элементом. Затем полное меню перемещается в левой стороне страницы. Далее небольшая треугольная стрелка сигнализирует о том, что на прокрутке есть больше содержимого.

Формы и поля

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

Это не означает, что формы должны быть скучными. Важны визуальные подсказки, которые помогают пользователям понять, что вводить в поле (и в каком формате), а также подтверждение успеха.

На примере выше реализованы все эти вещи. Пользователям сообщается, какую информацию нужно вводить, а после заполнения они видят сигнал об успехе. Быстрая проверка на экране сигнализирует о том, что они могут продолжать дальше.

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

Ресурсы и код для тестирования

Готовы добавить анимированные эффекты в свой дизайн? Вот ресурсы, которые могут помочь вам приступить к работе.

Hover.css: коллекция эффектов CSS для ссылок, кнопок, логотипов, SVG, изображений и т. д… Доступно в CSS, Sass и LESS.

Вывод

Анимация наведения — одна из тех техник дизайна, которые выглядят сложно и тяжело. Но с помощью CSS каждый может легко добавить простую анимацию на свой сайт.

Просто имейте в виду золотое правило использования любого трюка в вашем дизайне: оно должно быть значимым. Используйте эффекты наведения или анимацию, только тогда, когда они нужны. Будьте осторожны, не отвлекайте пользователей от действий, которые им необходимо сделать. Удачи!

15 эффектов для изображений (используем только CSS3)

Здравствуйте, уважаемые читатели XoZbloga! В этой статье подготовлены 15 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код. Чтобы увидеть их в действии посетите демонстрационную страницу.

Установка

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

* <
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
-ms-box-sizing : border-box ;
box-sizing : border-box ;
>

body <
background : #333 ;
>

.pic <
border : 10px solid #fff ;
float : left ;
height : 300px ;
width : 300px ;
margin : 20px ;
overflow : hidden ;

-webkit-box-shadow : 5px 5px 5px #111 ;
box-shadow : 5px 5px 5px #111 ;
>

border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство overflow : hidden .

Масштабирование и панорамирование

Наша первая группа эффектов включает в себя использование нескольких трюков с масштабированием и перемещением изображения.

Увеличение

Для начала мы сделаем так, что когда пользователь наводит курсор на изображение фотография увеличивается, оставаясь в пределах своих границ. Вот HTML :

Как Вы можете видеть здесь мы используем два класса pic и grow . Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим, CSS.

/*GROW*/
.grow img <
height : 300px ;
width : 300px ;

-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.grow img : hover <
width : 400px ;
height : 400px ;
>

Само по себе изображение 400х400px, но мы его подгоняем под размеры блока 300x300px и указываем transition свойство, означающее что другие свойства будут изменяться плавно в течении одной секунды, подробно про transition. Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.

Уменьшение

Это абсолютно противоположный эффект. Изначально изображение в полноценном размере, а при наведении уменьшается до 300х300px. таким образом создается эффект сжатия.

/*SHRINK*/
.shrink img <
height : 400px ;
width : 400px ;

-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>


.shrink img : hover <
width : 300px ;
height : 300px ;
>

Горизонтальное смещение

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

Изображение имеет размер 600х300px.

/*SIDEPAN*/
.sidepan img <
margin-left : 0px ;
-webkit-transition : margin 1s ease ;
-moz-transition : margin 1s ease ;
-o-transition : margin 1s ease ;
-ms-transition : margin 1s ease ;
transition : margin 1s ease ;
>

.sidepan img : hover <
margin-left : -200px ;
>

Все с помощью того же свойства transition мы плавно меняем, но уже свойство margin . При наведении смещаем картинку влево на 200px.

Вертикальное смещение

Аналогичен предыдущему и его можно было бы не приводить. Но все таки следуют продемонстрировать как можно применить такой эффект, точнее с каким изображением.

Изображение имеет размер 300х600px.

/*VERTPAN*/
.vertpan img <
margin-top : 0px ;
-webkit-transition : margin 1s ease ;
-moz-transition : margin 1s ease ;
-o-transition : margin 1s ease ;
-ms-transition : margin 1s ease ;
transition : margin 1s ease ;
>

.vertpan img : hover <
margin-top : -200px ;
>

Теперь смещаем вверх на 200px.

Трансформация

Повышаем сложность создаваемых эффектов. Начнем с простого наклона, а дальше больше. Использоваться будет свойство transform — еще эффект с помощью transform.

Наклон

Замечательный эффект. Небольшой поворот изображения в результате наведения курсора мыши.

/*TILT*/
.tilt <
-webkit-transition : all 0.5s ease ;
-moz-transition : all 0.5s ease ;
-o-transition : all 0.5s ease ;
-ms-transition : all 0.5s ease ;
transition : all 0.5s ease ;
>

.tilt : hover <
-webkit-transform : rotate ( -10deg ) ;
-moz-transform : rotate ( -10deg ) ;
-o-transform : rotate ( -10deg ) ;
-ms-transform : rotate ( -10deg ) ;
transform : rotate ( -10deg ) ;
>

Все что нужно было, так это повернуть изображение на десять градусов. Просто и эффективно! Обратите внимание, что эффект нацелен на сам класс, а не на изображение.

Поворот

Когда пользователь наводит на изображение, последнее начинает вращаться. Пока изображение вращается, блок див трансформируется в круг. В результате выходит супер эффект.

/*MORPH*/
.morph <
-webkit-transition : all 0.5s ease ;
-moz-transition : all 0.5s ease ;
-o-transition : all 0.5s ease ;
-ms-transition : all 0.5s ease ;
transition : all 0.5s ease ;
>

.morph : hover <
border-radius : 50% ;
-webkit-transform : rotate ( 360deg ) ;
-moz-transform : rotate ( 360deg ) ;
-o-transform : rotate ( 360deg ) ;
-ms-transform : rotate ( 360deg ) ;
transform : rotate ( 360deg ) ;
>

Суть заключается в том, что для классы morph вращается на 360 градусов при наведении курсора мыши. В это же время, border-radius принимает значение 50%, в результате чего получается круг.

Фокусировка

Вот еще один подобный эффект. Однако вращения не будет просто изображение закруглим и увеличим толщину границы.

/*FOCUS*/
.focus <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.focus : hover <
border : 70px solid #000 ;
border-radius : 50% ;
>

При наведении курсора, увеличиваем толщину границы с 10 до 70px, и как в предыдущем примере border-radius в 50%.

Фильтры изображений

На последок рассмотрим применение фильтров изображений. В отличие от приведенных выше примеров, каждый из которых используется несколько префиксов, чтобы обеспечить максимальную совместимость браузера, в филтрах использовать будем префикс-WebKit (для браузеров Chrome и Safari), потому что другие браузеры, к сожалению их (фильтры) не поддерживают.

Размытие

Первый эффект, который мы рассмотрим это размытие. Здесь с кодом все еще проще, одна строка.

/*BLUR*/
.blur img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.blur img : hover <
-webkit-filter : blur ( 5px ) ;
>

Как вы можете видеть, мы используем -webKit-filter , с размытием 5px.

Черно-белое изображение

С помощью этого фильтра, добьемся эффекта черно-белого изображения.

/*B&W*/
.bw <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.bw : hover <
-webkit-filter : grayscale ( 100% ) ;
filter : grayscale ( 100% ) ;
>

Здесь я установил оттенки серого ( grayscale ) со значением 100%. Процент оттенков серого можно понизить.

Осветление

Теперь поиграем яркостью изображения. Сначала затемним картинку, а при наведении вернем нормальное значение для яркости.

/*DARKEN*/
.brighten img <
-webkit-filter : brightness ( 65% ) ;
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.brighten img : hover <
-webkit-filter : brightness ( 145% ) ;
>

Изначально яркость делаем 65%, а при наведении устанавливаем значение 145% т.е. ярче на 45% от нормального состояние картинки.

Сепия

Еще один ретро эффект) перевод цветного изображения в тональность сепия.

/*SEPIA*/
.sepia img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.sepia img : hover <
-webkit-filter : sepia ( 100% ) ;
>

Значения фильтров сепия и оттенки серого указаны в процентах, где 100% является максимальным. Если не указывать число то 100% будут применены по умолчанию.

Контрастность

Теперь контрастность. На мой взгляд самый классный фильтр, можно управлять насыщенностью цветов в изображении.

/*CONTRAST*/
.contrast img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.contrast img : hover <
-webkit-filter : contrast ( 185% ) ;
>

Существует небольшая разница в использовании этого фильтра. Обычным значение контрастности является 100%. Больше 100% цвета насыщенней, меньше цвета тускнеют.

Оттенок изображения

Данный фильтр изменяет цвета картинки в зависимости от заданного угла.

/*HUE_ROTATE*/
.hue-rotate img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.hue-rotate img : hover <
-webkit-filter : hue-rotate ( 65deg ) ;
>

Значение оттенка изображения задается в градусах от 0-360, где 0 это нормальное значение.

Инверсия

Еще один Webkit фильтр изображений — это инверсия.

/*INVERT*/
.invert img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.invert img : hover <
-webkit-filter : invert ( 100% ) ;
>

Данный фильтр инвертирует цвета. Значение задается в % от 0-100.

Также мы можем объединить фильтры в одном правиле. Получается более комплексный эффект для изображения. Например сделать картинку черно-белой и добавить контрастности:

Прозрачность

Наверное самый распространенный способ манипуляции с цветами изображения, так это добавление прозрачности. Теперь и с помощью CSS3. Вынес его в отдельный раздел в связи с одной особенностью, о ней ниже.

/*OPACITY*/
.opacity img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.opacity img : hover <
-webkit-filter : opacity ( 25% ) ;
>

Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.

При таком варианте использование значение берется из интервала от 1 до 0.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии, спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Цукерберг рекомендует:  Icon - Как поставить на сайт волшебную иконку
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих