33 hover-эффекта на CSS3, о которых следует знать каждому
Сегодня я хочу поделиться с вами подборкой, состоящей из 33 hover-эффектов, основанных на CSS3.
Как уже понятно из заголовка, здесь вы найдете коллекцию, состоящую из 10 невероятно стильных CSS эффектов:
Этот невероятный CSS3-эффект поможет вам добиться уникального результата. При наведении курсора на элементы страницы эффект начинает следовать за указателем, создавая невероятный трехмерный эффект:
Несмотря на то, что этот эффект можно по праву считать самым распространенным, он по-прежнему способен привлекать внимание:
Если вам нужны круговые эффекты на CSS3-коде, то вы попали в нужное место! Здесь их целых 12 штук!
Еще один интересный CSS эффект при наведении курсора, который позволит создать невероятно привлекательные миниатюры или украсить любые изображения:
Предлагаем вашему вниманию несколько эффектов при наведении на кнопки. Все они достаточно привлекательны, и идеально подойдут для сайтов любого типа:
Еще один набор, состоящий из 10 различных CSS3-эффектов. Большинство из них очень впечатляющие:
Данная коллекция включает в себя четыре различных эффекта при наведении на картинку CSS. Каждый эффект раскрывает заголовок и описание:
Забавный и интересный эффект при наведении курсора на изображения. Он хорошо подойдет для раздела отзывов или списка сотрудников с их фотографиями:
Эффект, выполненный в винтажном стиле, который точно напомнит вам о прошлом!
Несмотря на название, это непросто эффект. Он показывает заголовки и слегка изменяет уровень прозрачности при наведении курсора:
Еще один простой, но очень привлекательный CSS эффект. При наведении курсора мыши на изображение оно переворачивается, раскрывая пользователю заголовок и описание:
Пока не наведете курсор на картинку, не поймете всей красоты эффекта. Бессистемные линии моментально выстраиваются в логотип, который тут же оформляется цветом:
Должен признать, что это самый интересный CSS hover эффект при наведении. Просто невероятно, как одно изображение раскрывает другое!
Возможно, это не самый практичный эффект, однако он точно забавный! Наведите курсор на солнцезащитные очки, и начнется магия!
Вам обязательно стоит опробовать каждый из них, так как все они помогут сделать изображения уникальными!
Этот уникальный hover CSS эффект отлично подойдет для текста, кнопок или картинок:
Не знаете, как украсить иконки поиска или карты? Тогда это решение для вас! Плавные трансформации будут приятны любому глазу:
Эффект отлично подойдет для скрытия кнопок социальных сетей, которые будут отображаться лишь при наведении курсора:
Этот CSS эффект поможет привлекательным образом отобразить дополнительную информацию о товарах в интернет-магазине:
Идеальный эффект при наведении для раздела контактов. Этот анимированный конверт отображает контактную информацию на развороте. Но происходит это только после наведения курсора:
Уникальный эффект при наведении, который позволяет заменить традиционную кнопку “Вверх” на анимированную:
Здесь представлено сразу два эффекта. Кроме увеличения картинки эффект также изменяет область отображения при наведении курсора на изображение:
Этот CSS эффект для сайта был разработан под вдохновением от видео, посвященного OS X Yosemite:
Еще один круглый эффект, применимый к круговым изображениям. Здесь представлено четыре различных hover-стиля:
Этот эффект представляет собой воссоздание анимации иконки браузера Safari. Можно без труда заменить иконку собственной картинкой или логотипом:
Этот простой CSS эффект можно применить как к кнопкам, так и к картинкам. Небольшое количество подсветки позволит представить картинки на странице в лучшем свете:
Если вы работаете над площадкой для размещения фотографий или картинок, то этот эффект может пригодиться. При наведении курсора изображение складывается в забавной манере, раскрывая при этом дополнительную информацию:
Интересный эффект, который можно применить к изображениям на сайте. Он как бы разглаживает изображение при наведении курсора:
Этот интересный CSS эффект при наведении позволяет изменять фон при наведении курсора на кнопку:
Еще один эффект при наведении, ориентированный на движение. Он позволяет слегка изменить уровень прозрачности изображения, как только на нем окажется курсор мыши:
Эти красивые hover CSS эффекты устроены довольно интересно. Настоящая анимация и масштабируемые SVG-картинки позволяют использовать подобные эффекты на сайтах любого типа:
Это, пожалуй, лучшие эффекты, созданные с помощью CSS3, которые мне удалось найти. Как они вам? Какие из них вы планируете использовать в собственных проектах? Напишите об этом в комментариях.
Данная публикация представляет собой перевод статьи «30+ CSS3 Hover Effects You should be Familiar With» , подготовленной дружной командой проекта Интернет-технологии.ру
Набор эффектов при наведении CSS — изображения при наведении CSS
Время чтения: 3 мин.
Прошлый месяц был связан с уроками о возможностях CSS3. На какое-то время оставим те уроки и хочу вам показать готовые «фишки», которые нужно лишь взять и применить на своём сайте. Надеюсь вы знаете такую фразу «Простота — залог успеха». Я ее услышал давно от друга дизайнера и она сильно мне запомнилась, но раньше я не придавал ей значения. А сейчас прекрасно понимаю, что чем проще дизайн сайта (ну не прям белый лист, хотя и здесь нужно смотреть 😉 ), тем проще посетителям разобраться что и где находится. В связи в с этим мы рассмотрим эффекты при наведении CSS.
Мне очень нравятся такие эффекты. Смотрите 30 вариантов эффектов по ссылке ниже:
Посмотреть примерСкачать
Все статьи, которые связи с эффектами при наведении CSS на моём сайте, которые я писал раньше:
Установка по шагам
К примеру мне понравился первый вариант из первого набора.
Вы видите как он выглядит. На этом примере я хочу показать как применить эти эффекты на вашем сайте.
Шаг 1 — HTML при наведении
Сейчас нужно открыть файл index.html (если вам понравился эффект из первого набор) или index2.html (если из второго) и найти в HTML коде тег <h3>Вариант НОМЕР</h3>, где НОМЕР — это понравившийся вам вариант.
Затем скопировать всё, что ниже это тега, то есть блок
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div>
<figure>
<img src="img/12.jpg" alt="img12"/>
<figcaption>
<div>
<h3>Ваш <span>заголовок</span></h3>
<p>Подробное описание</p>
</div>
<a href="#">Подробнее</a>
</figcaption>
</figure>
<figure>
<img src="img/1.jpg" alt="img1"/>
<figcaption>
<div>
<h3>Ваш <span>заголовок</span></h3>
<p>Подробное описание</p>
</div>
<a href="#">Подробнее</a>
</figcaption>
</figure>
</div> |
Сейчас у нас есть структура. Осталось подключить необходимые стили.
Шаг 2 — CSS
Это второй и последний шаг, который вам нужно сделать. В зависимости от того из какого набора эффект вам понравился, необходимо взять подключить CSS файл.
Выбираете:
| set1.css | если понравился первый набор. |
| set2.css | если понравился второй набор. |
Между тегами <head></head> подключаем выбранный CSS файл:
1 | <link href="css/set1.css" rel="stylesheet" type="text/css" /> |
Но это еще не всё! Так как в нескольких примерах есть иконки, а я думаю и они вам также понравятся. Чтобы появились иконки, вам необходимо скопировать папку font-awesome-4.2.0 в папку fonts вашей темы. А затем подключить между тегами <head></head>:
1 | <link href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> |
Это самая простая установка, что только может быть. Уверен — вы справитесь!
Вывод
Эти эффекты мне нравятся больше, чем просто изменение цвета при наведении на ссылку. Но здесь дело вкуса. Этот набор эффектов при наведении CSS дает вам множество вариантов (30!) на выбор, которые вы можете применять на собственном сайте.
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
Оригинальный эффект CSS3 при наведении на изображение
Время чтения: 3 мин. 
Из этого урока Вы узнаете как создать оригинальные эффекты при наведении на изображение или ссылку.
В данной статье мы сделаем красивый эффект при наведении на изображение. Вы можете посмотреть пример, а также скачать архив с примером:
Посмотреть примерСкачать
Сейчас рассмотрим более подробно. Для начала в HTML вставим список, которому в дальнейшем дадим свойства в CSS и он превратится в меню.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <div>
<div>
<img src="images/1.jpg">
<div>
<h3>Hover Style #1</h3>
<p>A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of spring which I enjoy with
my whole heart.</p>
<a href="#">Read More</a>
</div>
</div>
<div>
<img src="images/2.jpg">
<div>
<h3>Hover Style #1</h3>
<p>A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of spring which I enjoy with
my whole heart.</p>
<a href="#">Read More</a>
</div>
</div>
<div>
<img src="images/3.jpg">
<div>
<h3>Hover Style #1</h3>
<p>A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of spring which I enjoy with
my whole heart.</p>
<a href="#">Read More</a>
</div>
</div>
<div>
<img src="images/4.jpg">
<div>
<h3>Hover Style #1</h3>
<p>A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of spring which I enjoy with
my whole heart.</p>
<a href="#">Read More</a>
</div>
</div>
</div> |
А сейчас пропишем необходимые свойства в CSS файле:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | .view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h3 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h3,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
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 h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
} |
Успехов!
4 эффекта при наведении картинки в CSS
.vecome-darknes {margin: 15px;
}
.vecome-darknes h2 {
font-weight: 300;
margin: 0;
}
.vecome-darknes h3 {
font-weight: 300;
margin: 0;
}
.dozensenug {
float: left;
max-width: 400px;
margin: 15px;
}
.red {
background: #b31e1e;
}
.green {
background: #2da258;
}
.blue {
background: #1a8fca;
}
.dark{
background: #2d2d2d;
}
.nugeavies-top img,
.nugeavies-bottom img,
.nugeavies-left img,
.nugeavies-right img {
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
vertical-align: middle;
}
.nugeavies-top:hover img,
.nugeavies-bottom:hover img,
.nugeavies-left:hover img,
.nugeavies-right:hover img {
opacity: 0.2;
}
.nugeavies-top:hover,
.nugeavies-bottom:hover,
.nugeavies-left:hover,
.nugeavies-right:hover {
opacity: 1;
}
.nugeavies-top h3 {
position: absolute;
margin: -300px 0 0 18px;
opacity: 0;
font-size: 15px;
font-weight: 100;
color: #eaeaea;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-kthtml-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.nugeavies-top:hover > h3 {
opacity: 1;
margin: -80px 0 0 18px;
}
/* END TOP EFFECT */
/* BOTTOM EFFECT */
.nugeavies-bottom h3 {
position: absolute;
margin: 0 0 0 20px;
opacity: 0;
font-size: 15px;
font-weight: 100;
color: #eaeaea;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-kthtml-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.nugeavies-bottom:hover > h3 {
opacity: 1;
margin: -80px 0 0 18px;
}
/* END BOTTOM EFFECT */
/* LEFT EFFECT */
.nugeavies-left h3 {
position: absolute;
margin: -80px 0 0 0;
opacity: 0;
font-size: 15px;
font-weight: 100;
color: #eaeaea;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-kthtml-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.nugeavies-left:hover > h3 {
opacity: 1;
margin: -80px 0 0 18px;
}
/* END LEFT EFFECT */
/* RIGHT EFFECT */
.nugeavies-right h3 {
position: absolute;
margin: -80px 0 0 400px;
opacity: 0;
font-size: 15px;
font-weight: 100;
color: #eaeaea;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-kthtml-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.nugeavies-right:hover > h3 {
opacity: 1;
margin: -80px 0 0 18px;
}
CSS эффекты при наведении на картинку
Вы здесь: Главная — CSS — CSS3 — CSS эффекты при наведении на картинку
CSS библиотека imagehover – это коллекция различных CSS эффектов при наведении на картинку (hover effects), которые можно применять как к одиночным картинкам, так и к галереям.
Ссылка на сайт: http://imagehover.io/
Наилучшим образом, данные эффекты хорошо подходят, например к превью-изображениям, ссылающиеся на полную статью в блоге или на URL реального сайта из вашего портфолио.
Демонстрация примера
Что находится внутри CSS файла библиотеки? В бесплатной версии вы найдете 44 эффекта, каждый эффект имеет свой класс, в котором прописаны соответствующие свойства и их значения. В платной версии находятся стили 216 эффектов, но вам с головой хватит и 44 эффекта.
4 шага для запуска hover эффекта:
1) Скачать и подключить библиотеку
Скачайте архив и вытащите оттуда всего один CSS файл imagehover.min (сжатая версия) и подключите к вашему проекту.
<head>
<link rel="stylesheet" href="css/imagehover.min.css">
</head>
2) Выберите эффект
На главной странице imagehover.io, выберите нужный эффект и запомните название его класса, например мне понравился класс imghvr-slide-up.
3) Создайте галерею на HTML
Создадим ряд row с тремя колонками column, в каждую из которых поместим превью картинку, текст-описание и ссылку. Вставьте название класса imghvr-slide-up в тег figure. Замените цвет подложки у тега figcaption, на более гармонирующий с дизайном сайта, по умолчанию фон под текстом – синий. У тега a, вместо решетки поставьте URL.
<div>
<div>
<figure>
<img src="cat.jpg" alt="cat">
<figcaption>
<h3>Наведение на картинку</h3>
<p>imghvr-slide-up</p>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div>
<figure>
<img src="dog.jpg" alt="dog">
<figcaption>
<h3> Наведение на картинку</h3>
<p>imghvr-slide-up</p>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div>
<figure>
<img src="zebra.jpg" alt="zebra">
<figcaption>
<h3> Наведение на картинку</h3>
<p>imghvr-slide-up</p>
</figcaption>
<a href="#"></a>
</figure>
</div>
</div>
4) CSS стили
Вам необходимо подключить к проекту собственный файл стилей для стилизации ваших классов, прописанных в HTML коде.
<head>
// подключить ниже файла imagehover.min.css
<link rel="stylesheet" href="css/style.css">
</head>
Для того, чтобы поставить три колонки в ряд, применим технологию flexbox, которая принудительно удерживает блоки в ряду, не давая им встать друг под другом.
.row {
display: flex;
margin: 20px;
}
Поделим ряд на три одинаковых по ширине колонки и поставим по центру, контент (картинки) внутри блоков.
.column {
flex: 33.33%;
padding: 5px;
text-align: center;
}
При изменении ширины экрана, картинки будут масштабироваться, не ломая созданную структуру.
img {
width: 100%;
border: 1px solid #ddd; /* серая рамка */
}
Ошибка в документации
Обратите внимание, что на сайте библиотеки в документации раздела Background Color, есть ошибка. Правильно будет поменять цвет фона с дефолтного на ваш, добавив строчку кода к тегу figcaption, вместо figure.
style="background-color: #код_вашего_цвета;
Если вы все ещё размышляете о создании портфолио с вашими работами по веб-разработке, обратите внимание на видео-курс «О создании лендинга под ключ».
-
Создано 05.04.2019 10:39:42 -
Михаил Русаков
Создано 05.04.2019 10:39:42
Михаил РусаковКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Эффекты для ссылок, картинок и блоков на Вашем сайте с JQuery и CSS3
Привет, друзья. Сегодня представляю Вам очередную подборку разнообразных полезностей, которые можно скачать и использовать на сайте. Тут Вы сможете бесплатно скачать такие штуки как анимированные логотипы, множество эффектов для ссылок на Вашем сайте, а так же несколько классных и креативных эффектов для изображений и блоков на сайте.
Большое спасибо http://www.cssauthor.com и рекомендую:
Логотип с двумя кругами и классным анимированным эффектом на CSS
Демо Ι Скачать
Анимированный логотип на CSS
Демо Ι Скачать
Отличный 3d логотип с крутой анимацией
Демо Ι Скачать
Логотип с крутой анимацией при наведении на CSS
Демо Ι Скачать
Ещё логотип с классной анимацией при наведении
Демо Ι Скачать
Несколько анимационных эффектов для больших букв
Демо Ι Скачать
Интересный эффект на CSS для ссылок на сайте
Демо Ι Скачать
Анимационное подчёркивание ссылки на чистом CSS3
Демо Ι Скачать
3 стильных эффекта для ссылок
Демо Ι Скачать
Креативные эффекты для ссылок
Демо Ι Скачать
Интересный эффект для ссылки при наведении
Демо Ι Скачать
Заголовки с анимационным эффектом
Демо Ι Скачать
Классные эффекты при наведении для навигационных ссылок
Демо Ι Скачать
Креативные эффекты для ссылок
Демо Ι Скачать
3d эффект при наведении на ссылку с CSS3
Демо Ι Скачать
Несколько различных эффектов при наведении на ссылки
Демо Ι Скачать
Простой но стильный эффект для ссылок на Вашем сайте
Демо Ι Скачать
Классный и креативный CSS3 и 3d эффект для ссылки
Демо Ι Скачать
Креативная анимация для блоков на сайте
Демо Ι Скачать
Классный анимационный эффект с изображениями
Демо Ι Скачать
Интересные эффекты для изображений на сайте
Демо Ι Скачать
Крутой эффект для картинок при прокрутке на JQuery
Демо Ι Скачать
Увеличение картинок при наведении
Демо Ι Скачать
Плагин для увеличения любого изображения на сайте
Демо Ι Скачать
Появление текста при наведении на блок
Демо Ι Скачать
Несколько простых эффектов при наведении на картинку
Демо Ι Скачать
Случайный цвет для блока на jQuery
Демо Ι Скачать
Всплывающая подсказка для сайта
Демо Ι Скачать
Множество крутых анимационных эффектов для блока
Демо Ι Скачать
Эффект при наведении на изображение
Демо Ι Скачать
11 анимированных CSS3 эффектов при наведении на изображение
Напишите свое мнение
Привет дорогой друг!
Сегодня я публикую первый пост в этом блоге. Надеюсь он Вам будет полезен.
Css3 технология уже давно проникла в повседневную жизнь каждого верстальщика. Мы стараемся сделать наши сайты интересней для посетителя и используем различные css3 и Jquery эффекты. Еще года три назад это сводилось на нет из-за огромного количества юзеров с устаревшими браузерами. Сейчас времена изменились. Практически каждый эффект можно поставить на свой сайт и не думать о последствиях. Но запомните, всего должно быть в меру! Не переусердствуйте анимацией. Иногда это смотрится глупо.
Итак. К вашему вниманию 11 анимированных эффектов при наведении на изображение с использованием технологии css3.
Эффект перехода
Мультислайд
Эффект переворачивания изображения при наведении на css3
Современный анимированный эффект при наведении
Css эффект при наведении.
Поддержка IE6
Текстовый 3D эффект при наведении на css3
Эффект при наведении на изображение на css3 «CAPTION HOVER EFFECTS»
Параллакс эффект при наведении на изображение «CSS 3D Meninas»
3d эффект при наведении на изображение «3D THUMBNAIL HOVER EFFECTS»
Оригинальная анимация при наведении на изображение с использованием css3
Эффект затемнения изображения на css3
