Оригинальные hover эффекты при помощи css3. Создаем оригинальные hover-эффекты при помощи CSS3. CSS hover эффекты с определением направления

Пропишем заголовок «Эффект при наведении в CSS3 » и вставим в параграф текст «При помощи CSS3 можно творить свою магию. Следи за нами и подписывайся на канал DWS TV ».

Описываем стили в CSS

Обертке присвоим outline в 1 пик. что бы могли отслеживать размеры блока. Затем зададим фиксированную ширину в 350px. Отцентрируем блок по середине и зададим отступ с верху в 200px.

Затем что бы отцентровать картинку и вписать ее в блок задаем ширину картинке в 100%.

Dws-wrapper a img{ width: 100%; }

Позиционируем текст по центру блока при помощи position:absolute; с параметрами выравнивания с верху и лева 0 px.

Dws-text{ position: absolute; top: 0; left: 0; }

Чтобы текст от позиционировался пропишем обертке position: relative; , добавим border: solid 5px rgba(255, 255, 255, 0.8); , background: linear-gradient(20deg, #f00, #00f); , outline уберем.

Dws-wrapper{ width: 350px; margin: 200px auto 0; position: relative; border: solid 5px rgba(255, 255, 255, 0.8); background: linear-gradient(20deg, #f00, #00f); }

Dws-wrapper a{ display: block; color: #fff; text-decoration: none; }

Блоку с текстом добавим отступы padding: 40px 20px; и немного изменим размер шрифта.

Dws-text{ position: absolute; top: 0; left: 0; padding: 40px 20px; } .dws-text h3{ font-size: 25px; } .dws-text p{ font-size: 14px; }

Описываем псевдоклассы :before :after

Dws-wrapper a:before, .dws-wrapper a:after{ content: ""; position: absolute; width: 200%; height: 200%; }

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

Отбираем ссылку с псевдоклассом before и указываем ей right: 0; и bottom: -100%; цвет сделаем с прозрачностью в режиме rgba background: rgba(230, 12, 50, 0.8); и трансформируем блок под небольшим углом transform: skew(-45deg) translateX(100%);

Dws-wrapper a:before{ right: 0; bottom: -100%; background: rgba(230, 12, 50, 0.8); transform: skew(-45deg) translateX(100%); }

Аналогично проделаем для псевдокласса after , заменим координаты, цвет и трансформацию отразим с другой стороны.

Dws-wrapper a:after{ left: 0; top: -100%; background: rgba(11, 72, 174, 0.8); transform: skew(135deg) translateX(-100%); }

Анимируем элементы в CSS

После того как описали стили основной структуры приступаем к анимированию. Придаем пластичность и движение при помощи псевдокласса transition: .5s ease-in-out;

Далее добавляем координаты перемещения псевдоклассу before при наведении на него. Делаем перемещение по оси X в точку 0 при помощи трансформации transform: skew(-45deg) translateX(0%); .

Dws-wrapper:hover a:before{ transform: skew(-45deg) translateX(0%); }

Тоже самое проделываем для псевдокласса after только уже с лева на право transform: skew(135deg) translateX(0%); .

Dws-wrapper:hover a:after{ transform: skew(135deg) translateX(0%); }

Затем основному блоку сделаем overflow: hidden; это позволит скрыть все что выходит за его пределы.

Dws-wrapper{ width: 350px; margin: 200px auto 0; position: relative; border: solid 5px rgba(255, 255, 255, 0.8); background: linear-gradient(20deg, #f00, #00f); overflow: hidden; }

Блок с текстом в начальной точки скроем при помощи opacity: 0; , и сделаем ему z-index в приоритетность 100.

Описываем ему отображение по наведению при помощи opacity: 1;

Dws-wrapper:hover .dws-text{ opacity: 1; }

Теперь немного анимируем появление текста, при помощи transition: .5s ease;

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

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

HTML

Довольно простая структура.
Создаем родительскую оболочку с классом view и контентом внутри. Затем создаем контейнер с классом mask , где и будем применять css3 переходы получая эффекты при наведении. В некоторых примерах этот синтаксис немного изменится в зависимости от применяемого эффекта.

Полное изображение

CSS

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

View { width: 300px; height: 200px; margin: 10px; float: left; border: 5px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 0px 0px 5px #aaa; cursor: default; } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; } .view img { display: block; position: relative; } .view a.info { background:url(../img/link.png) center no-repeat; display: inline-block; text-decoration: none; padding:0; text-indent:-9999px; width:20px; height:20px; }

Пример 1

HTML

Добавим класс effect к элементу с классом view для этого эффекта:

Полное изображение

CSS

Чтобы уменьшить урок мы опустили в коде префиксы (-moz,-webkit и др.), но все они есть в css файлах эффектов.
В дополнении к свойству border для создания треугольника, мы использовали многократные переходы, что позволило иметь больше контроля над свойствами во время анимации:

Effect img { opacity:1; transform:scale(1,1); transition: all 0.2s ease-in; } .effect .mask { opacity:0; overflow:visible; border-color:rgba(0,0,0,0.7) transparent transparent transparent; border-style:solid; border-width:150px; width:0; height:0; transform:translateY(-125px); transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out; } .effect a.info { opacity:0; transform:translateY(-125px); transition: transform 0.3s ease-in, opacity 0.1s ease-in-out; } .effect:hover img { opacity:0.7; transform:scale(2,2); } .effect:hover .mask { opacity: 1; transform: translateY(0px); } .effect:hover a.info { opacity:1; transform:translateY(100px); }

Пример 2

HTML

Синтаксис этого примера несколько отличается, обычно достаточно добавить специальный класс second-effect к элементу с классом view , но тут мы еще добавили ссылку внутри элемента с классом mask :

Полное изображение

CSS

В этом примере мы собираемся работать с параметрами свойства border . Также реализовали box-sizing . Свойство box-sizing используется для изменения дефолтной box модели вычисляющей ширину и высоту элементов.

Second-effect .mask { opacity: 0; overflow:visible; border:0px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s ease-in-out; } .second-effect a.info { position:relative; top:-10px; opacity:0; transform:scale(0,0); transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; } .second-effect:hover .mask { opacity: 1; border:100px solid rgba(0,0,0,0.7); } .second-effect:hover a.info { opacity:1; transform:scale(1,1); transition-delay:0.3s; }

Пример 3

HTML

Добавим к классу view специальный класс third-effect для этого эффекта:

Полное изображение

CSS

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

Third-effect .mask { opacity: 0; overflow:visible; border:100px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s ease-in-out; } .third-effect a.info { position:relative; top:-10px; /* Center the link */ opacity: 0; transition: opacity 0.5s 0s ease-in-out; } .third-effect:hover .mask { opacity: 1; border:100px solid rgba(0,0,0,0.7); } .third-effect:hover a.info { opacity:1; transition-delay: 0.3s; }

Пример 4

HTML

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

CSS

Используя только класс mask в комбинации со свойством border-radius получится довольно красивый эффект. Также использовали свойство visibility , которое позволяет в конце перехода получить кликабельное изображение.

Fourth-effect .mask { position:absolute; /* Center the mask */ top:50px; left:100px; cursor:pointer; border-radius: 50px; border-width: 50px; display: inline-block; height: 100px; width: 100px; border: 50px solid rgba(0, 0, 0, 0.7); box-sizing:border-box; opacity:1; visibility:visible; transform:scale(4); transition:all 0.3s ease-in-out; } .fourth-effect:hover .mask { opacity: 0; border:0px solid rgba(0,0,0,0.7); visibility:hidden; }

Пример 5

HTML

В этом последнем примере такой же синтаксис, как и в четвертом, отличия лишь в добавляемом классе fifth-effect вместо fourth-effect:

CSS

Также здесь мы использовали свойство border и visibility . Трюк заключается в изменении свойства border с solid на double :

Fifth-effect img { opacity:0.2; transition: all 0.3s ease-in; } .fifth-effect .mask { cursor:pointer; opacity:1; visibility:visible; border:100px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620); } .fifth-effect:hover .mask { border:0px double rgba(0,0,0,0.7); opacity:0; visibility:hidden; } .fifth-effect:hover img { opacity:1; }

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

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

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

Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 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.