Эффекты для изображений на CSS


Оглавление (нажмите, чтобы открыть):

Все эффекты css3 при наведении на картинку

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

Объясню кратко принцип работы.

В 1 элемент до наведения мыши ставится css код:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;

И какие-то данные, которые будут изменены, например:
height: 188px;
width: 188px;

Далее, после наведения мыши пишем css, с новыми значениями, например:
width: 300px;
height: 300px;

Вот, что можно получить в итоге:

Согласитесь кол-во эффектов просто поражает!

Скачать данный пример css анимации для картинок

Также вы можете просмотреть огромный html + css3 код данного примера:

ez code

Просто о сложном.

3 крутых эффекта для изображений на CSS3

Современные технологии позволяют создавать красивые интерактивные сайты, при этом большинство эффектов можно реализовать с помощью чистого CSS, особенно с новыми возможностями CSS3. Раньше для создания разных эффектов мы прибегали к помощи JavaScript, но благодаря распространению поддержки CSS3, нам не нужны скрипты для создания красивых эффектов. К сожалению, некоторые браузеры до сих пор не поддерживают CSS3 (IE9 и ниже).

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

1 пример

HTML разметка

Для первого примера мы будем использовать неупорядоченный список (ul), внутри которого расположим заголовок и описание картинки. Разметка для примера:

Для создания эффекта мы используем классы demo-1 и effect.

С помощью CSS мы позиционируем наш класс demo-1, устанавливаем ширину и высоту. Так же надо спрятать, то что не поместится в указанные размеры. Так же стилизуем заголовки h2 и тег

, в котором находится описание. Теперь класс нашего эффекта: мы позиционируем картинку абсолютно, чтобы управлять её положением с помощью свойств top, left, right. И с помощью CSS3 свойства transition создаем плавненькую анимацию. CSS код эффекта:

2 пример

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

HTML разметка

Разметка очень похожа на предыдущий пример. Но теперь используется класс demo-2 и новый класс zero:

CSS тоже очень похож на первый пример, за исключением того, что теперь для анимации используется свойство bottom. Опять используем CSS3 transition для плавной анимации:

3 пример

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

HTML разметка

На этот раз разметка немного изменится. Мы будем использовать HTML5 элемент figure вместе с figcaption. И, как обычно, класс поменялся на demo-3:

В этом примере мы будем использовать свойство backface-visibility, чтобы делать картинку прозрачной при перевороте. Для вращения мы используем свойство transform: начальное значение — rotateY(-180deg) и при наведении меняем на 180 и для изображения и для заголовка.

CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.

Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:

Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов.

Hover эффект в CSS стилях добавляется справа от элемента следующим образом:

Чаще всего механизм применяется именно для ссылок дабы изменить их цвет или добавить/убрать подчеркивание. Однако он может быть задан и другим блокам, кнопкам, текстам или использоваться при создании горизонтального выпадающего меню.

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

Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы :link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после :link и :visited, если они существуют.

Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.

Hover эффекты кнопок и ссылок

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

Простые примеры для кнопок

В данной статье приведены 8 базовых способов как можно оригинальным образом обыграть динамические hover эффект при наведении: добавление иконки, создания прозрачного фона, 3D преобразование, наклон и т.п. Все коды достаточно простые, вот один из них:

Необычный градиентный в кнопке

Здесь при наведении появляется яркий цветной градиент, который следует за передвижением курсора. В реализации используются CSS переменные, а также скрипт определения позиции мышки. Результат выглядит это достаточно оригинально. Описание метода ищите тут.

Sullivan Buttons

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

CSS Icons on Hover

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

Button Hover Effects

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

Nav Hovers

Несколько фишек, которые позволяют сделать более необычные подчеркивания ссылок на CSS нежели с базовым свойством text-decoration. Фон кнопки дополнительно заполняется разными визуальными эффектами.

Info on Hover

Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.

Mana Button

Один из самых оригинальных вариантов hover эффекта в блоках — при наведении выполняется словно заполнение его жидкостью. В реализации используется CSS, HTML и SVG. В определенной тематике сайтов данный сниппет однозначно будет находкой.

Hover эффекты для изображений

15 базовых приемов

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

Красивые hover эффекты изображений

Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.

Barberpole Hover Animation

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

CSS hover эффекты с определением направления

Отличная подборка сниппетов и кодов по теме находится в статье с css-tricks.com. Все эти примеры объединяет тот факт, что в процессе работы определяется местоположение и направление движения курсора. Это, в свою очередь, позволяет создавать достаточно оригинальные реакции при наведении на элементы страницы:

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

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

Остальные фишки ищите в оригинальной статье.

Animatism

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

Caption Hover Effects

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

CSS Hover библиотеки

Hover.css

Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.

Imagehover.css

Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.

iHover

В проекте iHover более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.

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

Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.

Простые hover-эффекты для изображений при помощи CSS

19 декабря 2012 | Опубликовано в css | 15 Комментариев »

Мастер Йода рекомендует:  Учимся создавать анимированные GIF-картинки

Hover-эффекты — достаточно интересная тема для изучения. Ведь их применение может сделать ваш сайт более динамичным и живым. Сегодня мы рассмотрим некоторые эффекты для работы с изображениями. Каждый пример имеет HTML и CSS коды, которые вы можете увидеть в действии.

Посмотрите на демо ниже, чтобы увидеть все hover-эффекты, которые будут рассматриваться в этом уроке.

Установка

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

Большинство это основные вещи: box-sizing позволяет управлять моделями (не стесняйтесь применять более точные настройки, если вам не нравится универсальный селектор). Класс pic дает нам место, чтобы применять некоторые основные стили для каждой фотографии.

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

Первая группа эффектов включает в себя использование некоторых приемов с hidden overflow.

Увеличение

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

Вот HTML-код:

Обратите внимание, что изображение, которое было использовано в примере имеет размеры 400px на 400px. Теперь давайте посмотрим CSS.

Мы вначале устанавливаем размер изображения зооpx на 300px, а затем, когда пользователь наводит на него курсор, увеличиваем к 400px. Поскольку у нас overflow — hidden, это позволит нам получить эффект масштабирования.

Сжатие

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

HTML

CSS

Боковое панорамирование

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

HTML

Здесь мы используем изображение шириной 600px и высотой только 300px — мы изменяем горизонтальное положение фотографии и нам не нужно применять эффекты к высоте.

CSS

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

Вертикальное панорамирование

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

HTML

CSS


Код практически такой же, как и в прошлый раз, только теперь вместо margin-left мы используем margin-top.

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

Следующие эффекты более динамичны.

Наклон

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

HTML

CSS

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

Скругление углов

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

HTML

CSS

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

Фокус

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

HTML

CSS

Мы взяли border 10px и превратил его в 70px черную рамку при проворачивании радиусе до 50%, как мы это делали в предыдущем примере.

Webkit-фильтры

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

Размытие

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

HTML

CSS

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

B&W

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

HTML

CSS

Здесь для grayscale было установлено значение 100%.

Яркость

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

HTML

CSS

По материалам Joshua Johnson.

Перевод — Дежурка.

Возможно, вас также заинтересуют следующие статьи:

Эффекты для изображений на CSS

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

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

Полароид

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

Правда, мне этот эффект очень не нравится, но мне кажется, что вы сможете придумать ему достойное применение.

Для этого эффекта применим к div-у класс «polaroid». А внутрь его поместим изображение и текст. Я буду использовать изображение 200px на 200px (это важно).

Обратите внимание, в демо-примере выше, мы использовали пользовательский рукописный шрифт. Этот шрифт называется Kaushan. Чтобы использовать его, добавьте этот фрагмент кода между тегами head на вашей HTML-странице.

Теперь перейдем к CSS. Для класса polaroid, мы установим position: relative и ширину 220px. Относительное позиционирование здесь важно, потому что мы будем использовать абсолютное позиционирование для текста.

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

.polaroid <
position : relative ;
width : 220px ;
>

.polaroid img <
border : 10px solid #fff ;
border-bottom : 45px solid #fff ;
-webkit-box-shadow : 3px 3px 3px #777 ;
-moz-box-shadow : 3px 3px 3px #777 ;
box-shadow : 3px 3px 3px #777 ;
>

.polaroid p <
position : absolute ;
text-align : center ;
width : 100% ;
bottom : 0px ;
font : 400 18px / 1 ‘Kaushan Script’ , cursive ;
color : #888 ;
>

Множественная рамка

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

HTML-код очень прост для этого примера. На самом деле, div здесь не обязателен. Если вы используете только одно изображение, вы можете отказаться от обертки и применять класс прямо к изображению.

Как работает тень

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

Inset создает внутреннюю тень (мы будем использовать это позже), х устанавливает горизонтальное смещение, у задает вертикальное смещение, blur определяет, насколько размытая будет тень и spread, как далеко тень будет распространяться. Тень, которую мы использовали в предыдущем примере выглядит следующим образом:

Этот код устанавливает offsets и blur равным 3px и цвет #777, распространение не определено. Теперь давайте начнем работать с нашим примером:

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

Чтобы добавить вторую тень, все что нужно сделать — это вставить запятую, а затем повторить те же параметры, только изменив немного значения. На этот раз я установил первый spread равный 5px (черный), а второй — равный 10px (белый).

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

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

.multiple-borders <
-webkit-box-shadow :
0px 0px 0px 2px rgba ( 0 , 0 , 0 , 0.6 ) ,
0px 0px 0px 14px #fff ,
0px 0px 0px 18px rgba ( 0 , 0 , 0 , 0.2 ) ,
6px 6px 8px 17px #555 ;

-moz-box-shadow :
0px 0px 0px 2px rgba ( 0 , 0 , 0 , 0.6 ) ,
0px 0px 0px 14px #fff ,
0px 0px 0px 18px rgba ( 0 , 0 , 0 , 0.2 ) ,
6px 6px 8px 17px #555 ;

box-shadow :
0px 0px 0px 2px rgba ( 0 , 0 , 0 , 0.6 ) ,
0px 0px 0px 14px #fff ,
0px 0px 0px 18px rgba ( 0 , 0 , 0 , 0.2 ) ,
6px 6px 8px 17px #555 ;
>

Виньетка

На этот раз мы собираемся использовать другой тип box-shadow, чтобы создать очень необычный эффект. Используя параметр «inset» для тени, мы можем создать такой красивый эффект а-ля Photoshop, как виньетка, используя только CSS.

На этот раз нам нужен пустой div. При желании можно разместить текст внутри, но изображение должно быть вставлено с помощью CSS. Потому что внутренняя тень будет появляться под содержанием вставленным в HTML-код, а это означает, что изображение будет скрывать её полностью.

В CSS нам нужно установить изображение как фон, а затем определить ширину и высоту div-a. После этого настало время применить тени. Обратите внимание, что в значении inset установлено как вертикальное, так и горизонтальное смещение равным 0.

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

.vignette <
background : url ( «/400/200/nature/5.jpg» ) ;
width : 400px ; height : 200px ;
-webkit-box-shadow :
inset 0 0 50px #000 ,
inset 0 0 50px #000 ,
inset 0 0 50px #000 ;

-moz-box-shadow :
inset 0 0 50px #000 ,
inset 0 0 50px #000 ,
inset 0 0 50px #000 ;

box-shadow :
inset 0 0 50px #000 ,
inset 0 0 50px #000 ,
inset 0 0 50px #000 ;
>

Гранж-эффект для фотографии

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

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

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

body <
background : #867d79 ;
>

.grunge <
background : url ( «http://lorempixum.com/400/200/technics/4» ) ;
width : 400px ; height : 200px ;
margin : 50px ;
-webkit-box-shadow : inset 0 0 20px black ;
-moz-box-shadow : inset 0 0 20px black ;
box-shadow : inset 0 0 20px black ;
>

.grunge :hover <
background : url ( «/imagetreatments-texture3.png» ) , url ( «/400/200/technics/4.jpg» ) ;
>

Заключение

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

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

Как сделать — визуальные эффекты изображениям

Узнайте, как добавить визуальные эффекты к изображениям.

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

Фильтры CSS

Свойство CSS filter добавляет визуальные эффекты (например, размытие и насыщенность) к элементу.

Примечание: Свойство Filter не поддерживается в обозревателе Internet Explorer, EDGE 12 или Safari 5,1 и более ранних версиях.

Пример в градациях серого

Изменить цвет всех изображений на черный и белый (100% серый):

Мастер Йода рекомендует:  Подростка из Японии задержали за продажу вируса для смартфонов

fablee / 15 эффектов для изображений.css

15 эффектов для изображений (используем только CSS3)
/ /* Перед тем, как приступить к созданию отдельных демонстраций, вот кусочек 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 : 10 px solid #fff ;
float : left ;
height : 300 px ;
width : 300 px ;
margin : 20 px ;
overflow : hidden ;
-webkit-box-shadow : 5 px 5 px 5 px #111 ;
box-shadow : 5 px 5 px 5 px #111 ;
>
/ /* border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ,
а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень.
И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри,
за пределы не выйдет свойство overflow : h >*/ /
Масштабирование и панорамирование
Для начала мы сделаем так, что когда пользователь наводит курсор на изображение фотография увеличивается,
оставаясь в пределах своих границ. Вот HTML :
div >>
img src=»http://lorempixel.com/400/400/people/9″ alt=»portrait» >
div >
Как Вы можете видеть здесь мы используем два класса pic и grow.
Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим, CSS.
/* GROW */
.grow img <
height : 300 px ;
width : 300 px ;
-webkit-transition : all 1 s ease ;
-moz-transition : all 1 s ease ;
-o-transition : all 1 s ease ;
-ms-transition : all 1 s ease ;
transition : all 1 s ease ;
>
.grow img :hover <
width : 400 px ;
height : 400 px ;
>
Само по себе изображение 400х400px, но мы его подгоняем под размеры блока 300x300px и указываем transition свойство,
означающее что другие свойства будут изменяться плавно в течении одной секунды, подробно про transition.
Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.
Уменьшение
Это абсолютно противоположный эффект.
Изначально изображение в полноценном размере, а при наведении уменьшается до 300х300px.
таким образом создается эффект сжатия.
div >>
img src=»http://lorempixel.com/400/400/nightlife/4″ alt=»city» >
div >
/* SHRINK */
.shrink img <
height : 400 px ;
width : 400 px ;
-webkit-transition : all 1 s ease ;
-moz-transition : all 1 s ease ;
-o-transition : all 1 s ease ;
-ms-transition : all 1 s ease ;
transition : all 1 s ease ;
>
.shrink img :hover <
width : 300 px ;
height : 300 px ;
>
Горизонтальное смещение
Данный эффект не манипулирует размерами изображения, но зато меняет позицию в блоке.
При наведении картинка смещается горизонтально в сторону.
div >>
img src=»http://lorempixel.com/600/300/sports/8″ alt=»kick» >
div >
Изображение имеет размер 600х300px.
/* S >*/
.sidepan img <
margin-left : 0 px ;
-webkit-transition : margin 1 s ease ;
-moz-transition : margin 1 s ease ;
-o-transition : margin 1 s ease ;
-ms-transition : margin 1 s ease ;
transition : margin 1 s ease ;
>
.sidepan img :hover <
margin-left : -200 px ;
>
Все с помощью того же свойства transition мы плавно меняем, но уже свойство margin.
При наведении смещаем картинку влево на 200px.
Вертикальное смещение
Аналогичен предыдущему и его можно было бы не приводить.
Но все таки следуют продемонстрировать как можно применить такой эффект, точнее с каким изображением.
div >>
img src=»http://lorempixel.com/300/600/sports/5″ alt=»climb» >
div >
Изображение имеет размер 300х600px.
/* VERTPAN */
.vertpan img <
margin-top : 0 px ;
-webkit-transition : margin 1 s ease ;
-moz-transition : margin 1 s ease ;
-o-transition : margin 1 s ease ;
-ms-transition : margin 1 s ease ;
transition : margin 1 s ease ;
>
.vertpan img :hover <
margin-top : -200 px ;
>
Теперь смещаем вверх на 200px.
Трансформация
Повышаем сложность создаваемых эффектов. Начнем с простого наклона, а дальше больше.
Использоваться будет свойство transform — еще эффект с помощью transform.
Замечательный эффект. Небольшой поворот изображения в результате наведения курсора мыши.
div >>
img src=»http://lorempixel.com/300/300/transport/5″ alt=»car» >
div >
/* TILT */
.tilt <
-webkit-transition : all 0.5 s ease ;
-moz-transition : all 0.5 s ease ;
-o-transition : all 0.5 s ease ;
-ms-transition : all 0.5 s ease ;
transition : all 0.5 s ease ;
>
.tilt :hover <
-webkit-transform : rotate ( -10 deg );
-moz-transform : rotate ( -10 deg );
-o-transform : rotate ( -10 deg );
-ms-transform : rotate ( -10 deg );
transform : rotate ( -10 deg );
>
Все что нужно было, так это повернуть изображение на десять градусов.
Просто и эффективно! Обратите внимание, что эффект нацелен на сам класс, а не на изображение.
Наклон
Когда пользователь наводит на изображение, последнее начинает вращаться.
Пока изображение вращается, блок див трансформируется в круг. В результате выходит супер эффект.
div >>
img src=»http://lorempixel.com/300/300/nature/5″ alt=»beach» >
div >
/* MORPH */
.morph <
-webkit-transition : all 0.5 s ease ;
-moz-transition : all 0.5 s ease ;
-o-transition : all 0.5 s ease ;
-ms-transition : all 0.5 s ease ;
transition : all 0.5 s ease ;
>
.morph :hover <
border-radius : 50 % ;
-webkit-transform : rotate ( 360 deg );
-moz-transform : rotate ( 360 deg );
-o-transform : rotate ( 360 deg );
-ms-transform : rotate ( 360 deg );
transform : rotate ( 360 deg );
>
Суть заключается в том, что для классы morph вращается на 360 градусов при наведении курсора мыши.
В это же время, border-radius принимает значение 50%, в результате чего получается круг.
Фокусировка
Вот еще один подобный эффект. Однако вращения не будет просто изображение закруглим и увеличим толщину границы.
div >>
img src=»http://lorempixel.com/300/300/sports/1″ alt=»cricket» >
div >
/* FOCUS */
.focus <
-webkit-transition : all 1 s ease ;
-moz-transition : all 1 s ease ;
-o-transition : all 1 s ease ;
-ms-transition : all 1 s ease ;
transition : all 1 s ease ;
>
.focus :hover <
border : 70 px solid #000 ;
border-radius : 50 % ;
>
При наведении курсора, увеличиваем толщину границы с 10 до 70px, и как в предыдущем примере border-radius в 50%.
Фильтры изображений
На последок рассмотрим применение фильтров изображений. В отличие от приведенных выше примеров, каждый из которых используется несколько префиксов, чтобы обеспечить максимальную совместимость браузера, в филтрах использовать будем префикс-WebKit (для браузеров Chrome и Safari), потому что другие браузеры, к сожалению их (фильтры) не поддерживают.
Размытие
Первый эффект, который мы рассмотрим это размытие. Здесь с кодом все еще проще, одна строка.
div >>
img src=»http://lorempixel.com/300/300/transport/2″ alt=»plane» >
div >
/* BLUR */
.blur img <
-webkit-transition : all 1 s ease ;
-moz-transition : all 1 s ease ;
-o-transition : all 1 s ease ;
-ms-transition : all 1 s ease ;
transition : all 1 s ease ;
>
.blur img :hover <
-webkit-filter : blur ( 5 px );
>
Как вы можете видеть, мы используем -webKit-filter, с размытием 5px.
http://xozblog.ru/2012/11/15-effects-css3/
  • © 2020 GitHub , Inc.
  • Terms
  • Privacy
  • Security
  • Status
  • Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Vavik 96

Интернет дайджест для вебмастеров и фотографов

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 является то, что мы можем изменить размер формы в соответствии размеров родительского контейнера.

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

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

Мастер Йода рекомендует:  Обрезание строк с помощью функций PHP

Slick CSS3 Animated Image

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Caption Hover Effects

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

In this tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites.

Animated Text and Icon Menu with jQuery

Learn how to create a slick menu with a nice animation feature on hover.

Make elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

CSS3 Hover Effects

Beautiful CSS3 Image Effects

This tutorial will show you five examples of CSS3 hover effects using different CSS properties. Please note that the CSS3 effects will only work properly in modern browsers that support the CSS3 properties in use.

Unique CSS Button Hover Effects

Some creative and modern button styles and effects for your inspiration.

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.

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?

Девять простых примеров 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 анимации были полезными для вас. Желаем творческих успехов!

Добавить комментарий