(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Hover-эффекты на CSS

Источник: habrahabr
grokru

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

Демонстрация всех эффектов / Скачать исходники

1. Движение вверх

Хорошо подходит для нескольких изображений, расположенных горизонтально. Используется CSS-transition.

.ex1 img{
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
 
.ex1 img:hover {
    margin-top: 2px;
}

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

Оригинальное изображение размеров 400 на 133 пикселя, но в "состоянии покоя" уменьшается до 300 на 100.

#container {
    width: 300px;
    margin: 0 auto;
}
 
#ex2 img{
    height: 100px;
    width: 300px;
Антивирусные программные модули "Лаборатории Касперского"    margin: 15px 0;
     -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
 
#ex2 img:hover {
    height: 133px;
    width: 400px;
    margin-left: -50px;
}

3. Появление текста

При помощи color: transparent и line-height: 0px текст скрывается до наведения курсора на изображения.

#ex3 {
    width: 730px;
    height: 133px;
    line-height: 0px;
    color: transparent;
    font-size: 50px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
       font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
#ex3:hover {
    line-height: 133px;
    color: #575858;
}
 
#ex3 img{
    float: left;
    margin: 0 15px;
}

4. Поворот

При наведении превью просто немного поворачивается.

#ex4 {
    width: 800px;
    margin: 0 auto;
}
 
#ex4 img {
    margin: 20px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
#ex4 img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

5. Подсвечивание и отражение

Хорошо смотрится на темном фоне. Подробнее об отражении в CSS можно почитать в блоге David Walsh.

#ex5 {
    width: 700px;
    margin: 0 auto;
    min-height: 300px;
}
 
#ex5 img {
    margin: 25px;
    opacity: 0.8;
    border: 10px solid #eee;
 
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
 
    /*Reflection*/
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
 
 
#ex5 img:hover {  
   opacity: 1;
 
   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
 
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

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

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

.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;
}

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

.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;
}

8. Обзор горизонтальный

.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;
}

9. Обзор вертикальный

.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;
}

10. Изменение угла

.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);
}

11. Скругление

.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);
}

12. Фокус

.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%;
}

13. Размытие

.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);
}

14. Черно-белое

.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%);
}

15. Яркость

.brighten img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.brighten img:hover {
  -webkit-filter: brightness(0%);
}

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 19.11.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Rational ClearCase Multisite Floating User License
Quest Software. TOAD for SQL Server Xpert Edition
ARCHICAD 21, локальная лицензия
ABBYY Lingvo x6 Английская Домашняя версия, электронный ключ
IBM RATIONAL Clearcase Floating User From Rational Clearcase Lt Floating User Trade Up License + Sw Subscription & Support 12 Months
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование на Microsoft Access
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
Вопросы и ответы по MS SQL Server
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Топ рейтинг слотов 2021 года (6)
Среди огромного выбора азартных слотов...
 
Отличается ли ДрифтКазино от беттинга? (43)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Нормальные казино в 2021 году (14)
После долгих поисков все таки смог найти хорошие игровухи, хотя и ушла куча времени, пока я...
 
Игровые автоматы на настоящие деньги (8)
Только играя в интернет-заведении с лицензией...
 
Программирование (15)
Хочу начать работать в данной сфере. Где можно всему обучиться?
 
 
 



    
rambler's top100 Rambler's Top100