(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
Avira Internet Security Suite, 1 ПК, 1 год
IBM Domino Utility Server Processor Value Unit (PVU) License + SW Subscription & Support 12 Months
ABBYY Lingvo x6 Европейская Профессиональная версия, электронный ключ
ABBYY Lingvo x6 Английская Профессиональная версия
Microsoft SQL CAL 2017 Sngl OLP 1License NoLevel DvcCAL
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Delphi - проблемы и решения
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Сергей Ковалевский: Хватит платить Западу - у России должна быть своя ОС (68)
> На сегодняшний день открытых СУБД не существует. Есть довольно > примитивный MySQL, а все...
 
Как заказчики обманывают наивных художников и дизайнеров (19)
Ни один уважающий себя деловой человек не будет бесплатно раздавать свою работу и тратить время...
 
Помощь по MS Access (332)
Доброе время суток. Случайно оказался на этом сайте, искал статьи по OLAP. Вижу, что...
 
Мужчины забудут о половом бессилии (1)
Мужчины забудут о половом бессилии благодаря таблеткам Дженерик Сиалис. Мой партнер покупает в...
 
3D редакторы, плюсы и минусы (3)
Одно из многих сотен бестолковых обобщений. Прости их господи, Васей Пупкиных
 
 
 



    
rambler's top100 Rambler's Top100