Css анимация при наведении на изображение. Hover-эффекты для изображений на чистом CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Border Animation Effect

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

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

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

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

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

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

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

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

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

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

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

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

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

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

How to create some subtle and modern caption hover effects.

Learn how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button.

Direction aware CSS3 Hover Effect with jQuery

Create a direction-aware hover effect using CSS3 and jQuery.

Learn how to create a direction aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse.

Circle Hover Effects with CSS Transitions

A tutorial about how to create different hover effects on circles with CSS transitions and 3D rotations

This CSS button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons a bit of JavaScript to add/remove effect classes is used.

Icon Hover Effects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.

Here’s a collection of simple icon hover effects. Create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.

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

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

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

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

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

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

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

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

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

Об этом способе я рассказывал в одном из предыдущих своих уроков: .

С Уважением, Андрей

| 18.02.2016

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

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

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

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

Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }

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

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

Color:hover { background:#53ea93; }

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

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

Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }

3. Свинг

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

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

@-webkit-keyframes swing { 15% { -webkit-transform: translateX(9px); transform: translateX(9px); } 30% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 65% { -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes swing { 15% { -webkit-transform: translateX(9px); transform: translateX(9px); } 30% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 65% { -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .swing:hover { -webkit-animation: swing 0.6s ease; animation: swing 0.6s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

4. Затухание

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

Fade { opacity: 1; } .fade:hover { opacity: 0.6; }

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

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

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

Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

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

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

Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }

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

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

Circle:hover { border-radius: 70%; }

8. Вращение

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

Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }

9. 3D тень

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

Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }

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

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

Десктопные браузеры
Internet Explorer	Поддерживается версией IE 10 и выше
Chrome	Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-)
Firefox	Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-)
Opera	Поддерживается с версии 12.1
Safari	Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-)

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

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

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

CSS3 дал бесчисленные возможности для дизайнеров UX (опыта взаимодействия), а самое лучшее в этом, что самые крутые элементы действительно просты в реализации.

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

Вот 8 действительно простых эффектов, которые добавят жизнь в ваш UI (пользовательский интерфейс) и улыбок на лица ваших пользователей.

Все эти эффекты (один прямоугольник) управляются с помощью свойства transition. Таким образом, чтобы видеть, как эти эффекты работают, мы создали div в HTML странице:

Сделав это, установите его ширину и высоту (чтобы он имел размеры), его цвет фона (чтобы мы могли видеть его) и свойства его эффекта.

Свойство transition имеет три значения: свойства по переходу (в нашем случае все из них) скорость перехода (в нашем случае 0,3 секунды) и третье значение, которое позволяет изменять как рассчитывается ускорение и замедление, но мы продержимся настройки по умолчанию, оставляя это поле пустым.

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

Если вы хотите продолжить самостоятельно, то для вас демо-файлы .

1. Затемнение

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

Эффект кодируются в два этапа: сначала, вы установите начальное состояние; далее установите изменение, например, при наведении мыши:

Fade { opacity:0.5; } .fade:hover { opacity:1; }

(Убедитесь, что вы присвоили вашему div класс "fade", чтобы увидеть, как это работает.)

2. Смена цвета

Раньше анимация изменения цвета был невероятно сложным делом, с вовлечением математики, участвующей в расчете отдельные значения RGB, а затем рекомбинации их. Теперь мы просто устанавливаем div’у класс "color" и задаём цвет, какой хотим, в CSS:

Color:hover { background:#53a7ea; }

3. Увеличение и ужатие

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

Установите класс вашего div, на «grow», а затем добавьте этот код в ваш стиль блока:

Grow:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }

Ужать элемент так же просто, как увеличить его. Чтобы увеличить элемент мы указываем значение, большее 1, чтобы уменьшить его, мы указать значение меньше, чем 1:

Shrink:hover { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }

4. Кручение элементов

CSS предусматривает ряд трансформаций, и одна из лучших - это кручение элемента. Присвойте вашему div’у класс "rotate" и добавьте следующие строки в ваш CSS:

Представляем вашему вниманию новый курс от команды The Codeby - "Тестирование Веб-Приложений на проникновение с нуля". Общая теория, подготовка рабочего окружения, пассивный фаззинг и фингерпринт, Активный фаззинг, Уязвимости, Пост-эксплуатация, Инструментальные средства, Social Engeneering и многое другое.

Rotate:hover { -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg); }

5. Превращение квадрата в круг

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

Присвойте вашему div’у класс "circle" и добавить эти строки к вашим таблицам стилей:

Circle:hover { border-radius:50%; }

6. 3D тень

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

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

Присвойте вашему div’у класс "threed", а затем добавьте следующий код в ваш CSS:

Threed:hover { box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-3px); transform: translateX(-3px); }

7. Качание

Не все элементы используют свойство перехода. Мы также можем создать очень сложные анимации с использованием @keyframes, анимации и анимации-итерации.

В этом случае, мы сначала определим CSS анимации в стилях. Вы заметите, что из-за проблем реализации, мы должны использовать @-webkit-keyframes, а также @keyframes (да, Internet Explorer действительно лучше, чем Chrome, в этом отношении, по крайней мере).

@-webkit-keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } }

8. Вставка границы

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

Дайте вашему дел класс "border" и добавьте следующий CSS для ваших стилей:

Border:hover { box-shadow: inset 0 0 0 25px #53a7ea; }

Хотите узнать, ? или ? Всё это и многое другое на сайте . Подписывайтесь на нашу e-mail рассылку (внизу страницы) или на и вы узнаете первым о новых статьях! Также вступайте в нашу

Сегодня вы попробуете украсить свой сайт или блог красивыми эффектами для изображений с помощью CSS и обычного HTML кода. Да, именно CSS и обычного HTML кода, без использования языка программирования PHP, JavaScript, jQueri и прочих.
Что могут эффекты, предложенные мной на блоге сайт:

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

А также и такие эффекты:

размытие, осветление, контрастность, сепия;
плавный переход с цветного изображение в черно-белое;
инверсия цвета.

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

Основной код

Этот код применяется ко всем эффектам, которые будут предложены для вас далее:

* { -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; }

Все стили в классе «.pic » будут общими для всех изображений. Для всех изображений установлена белая рамка в 10px (строка №13 ). Указываются одинаковые размеры изображения для высоты и ширины в 300px (строка №15, №16 ). Отступ от блоков в 20px (строка №17 ). Чтобы картинка не выходила за указанные приделы, прописываем «overflow: hidden; ». Если для вас все это непонятно, настоятельно рекомендую прочитать .

Приступаем к эффектам.

1. Эффект «Увеличение»

вот этот код:

Строка №2 , укажите путь к изображению, размер которого 400 х 400px.

В CSS вставьте вот этот код:

/* увеличить изображение */ .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, но мы уменьшим его под наш блок 300 х 300px (Строка №3 и №4 ).
Изображение изменяется плавно к исходному изображению 400 х 400px (Строка №14 и №15 ). За плавное изменение размеров отвечает свойство transition , где указанно 1 секунда. (Строка №6 - №10 ).

2. Эффект «Уменьшение»

По сути, это один и тот же код, только нужно поменять размеры и изображение плавно с больших размеров 400 х 400px уменьшиться на 300 х 300px.

В HTML файл между тегами вставьте вот этот код:

В CSS вставьте вот этот код:

/*уменьшение изображение*/ .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; }

3. Эффект «Горизонтальное смещение»

Этот эффект меняет позиции блока. То есть, если навести курсором на картинку, изображение сместится в сторону.

В HTML файл вставьте между тегами вот этот код:

В строке №2 укажите путь к изображению, размер которого 600 х 300px.

В CSS вставьте вот этот код:

/*горизонтальное смещение изображение*/ .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; }

Чтобы картинка сместилась влево, укажите в свойстве «margin-left » значение «-200». Если значение указать «200», смещение будет в правую сторону.

4. Эффект «Вертикальное смещение»

По сути, это один и тот же код, только нужно вместо свойства «margin-left » прописать «margin-top » и изображение при наведении курсора плавно будет двигаться вверх.

В HTML файл вставьте между тегами вот этот код:

В CSS вставьте вот этот код:

/*Вертикальное смещение изображение*/ .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; }

Если в свойствах «margin-top » указать значение «200», смещение изображения будет вниз.

5. Эффект «Наклон»

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

В HTML файл вставьте между тегами вот этот код:

В CSS вставьте вот этот код:

/*наклон изображеня*/ .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); }

Картинка при наведении курсора повернется на 10 0 влево (Строка№11-№15 ). Вы можете увеличить градус поворота самостоятельно.

6. Эффект «Поворот изображения с изменением формы»

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

В HTML файл вставьте между тегами вот этот код:

В CSS вставьте вот этот код:

/*поворот изображения с изменением формы*/ .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); }

За закругление углов отвечает «border-radius » со значением «50%».
За поворот изображения на 360 0 отвечает свойство transform.

7. Эффект «Фокусировка изображения»

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

В HTML файл вставьте между тегами вот этот код:

В CSS вставьте вот этот код:

/*фокусировка изображения*/ .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%; }

Здесь, думаю, вам все понятно: border отвечает за толщину рамки и border-radius за радиус закругления.

8. Эффект «Размытие»

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

В HTML файл вставьте между тегами вот этот код:

В CSS вставьте вот этот код:

/* размытие изображения*/ .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: blur » с параметрами 5px.

9. Эффект «Черно-белое изображение»

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

В HTML файл вставьте между тегами вот этот код:

В CSS вставьте вот этот код:

/*черно-белое изображение*/ .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%); }

Насколько сделать черно-белым изображение отвечает фильтр «webkit-filter: grayscale » со значением «100%». Можете указать собственное значение от 1%-100%.

10. Эффект «Осветление»

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

В HTML файл вставьте между тегами вот этот код:

В CSS вставьте вот этот код:

/*осветление изображения*/ .brighten img { -webkit-filter: brightness(10%); -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(100%); }

Изначально затемняет изображение на «10%» (строка №3 )

При наведении курсора мышки, осветляет изображение на «100%»(строка №12 )

11. Эффект «Сепия»

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

В CSS вставьте вот этот код:

/* Сепия*/ .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%); }

12. Эффект «Контрастность»

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

В CSS вставьте вот этот код:

/*Контрастность изображения*/ .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%); }

Обратите внимание на строку №11 . Если указать значение «100%», изменения не произойдут. Если процент сделать больше «100%», например «185%», изображение станет контрастней. Если процент сделать меньше «100%», например «60%», изображение потускнеет.

13. Эффект «Инверсия»
Это тоже один из моих любимых эффектов. Как-то по «металёвому» смотрится .

В HTML файл вставьте между тегами вот этот код:

В CSS вставьте вот этот код:

/*Инверсия изображения*/ .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% (строка №11 ).

Вот и все! Надеюсь, статья вам понравилась! Если понравилась, жмите на лайк социальных сетей.