Лучшие CSS эффекты при наведении курсора на изображение

Лучшие CSS эффекты при наведении курсора на изображение

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

В  статье можно узнать о десяти лучших CSS эффектах для ваших изображений. Примечательно то, что не нужно никаких jqeury и тем более javascript, для того чтобы сделать красивый эффект - всё работает при помощи разметки CSS 3.

Демонстрацию всех эффектов можно посмотреть кликнув по этому предложению

Создаем класс для всех изображений

Изображение должны обязательно принадлежать классу pic. Он содержит информацию об расположении блока с изображением - float; о высоте и ширине блока -  height и width; тип отображение, если изображении больше, чем размер блока -  overflow, а также информацию об рамке - border, тени - box-shadow  и отступе - margin. Полный CSS  класса pic будет выглядеть так:

.pic {
  border: 10px solid #fff;  
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
  
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
}

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

Увеличение

Лучшие CSS эффекты при наведении курсора на изображение

Теперь к самим эффектам. Например, в эффекте "Увеличение",  HTML - код будет выглядеть так:

HTML

<div class="grow pic">
 <img border="0" src="http://1.bp.blogspot.com/-13VSZrmIQyw/UhhoDaEgC9I/AAAAAAAAGIs/oxBNePz_aVo/s000/girl.jpeg" />
</div>

где,  class="grow pic" выполняет подключение к обязательному классу  pic и к своему эффекту grow. CSS будет иметь вот такой вид:

CSS

/*Увеличение*/
.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;
}

Сокращение в объеме

Лучшие CSS эффекты при наведении курсора на изображение

HTML
<div class="shrink pic">
  <img src="http://4.bp.blogspot.com/-3M7MgqrqRfw/UhhoB6E-OwI/AAAAAAAAGIU/8w54W8rZLns/s000/city.jpeg" alt="city">
</div>

CSS
/*Сокращение в объеме*/
.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;
}

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

Лучшие CSS эффекты при наведении курсора на изображение

HTML
<div class="sidepan pic">
  <img src="http://1.bp.blogspot.com/-sTY94AqZaPs/UhhoFqoQyMI/AAAAAAAAGI0/SmnsCkw7SgU/s000/kick.jpeg" alt="kick">
</div>

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

CSS
/*Боковое панорамирование*/
.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;
}

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

Лучшие CSS эффекты при наведении курсора на изображение

HTML
<div class="vertpan pic">
  <img src="http://1.bp.blogspot.com/-OCi_1Jb2nN8/UhhoCRChZNI/AAAAAAAAGIc/ndLJqrMbOOU/s000/climb.jpeg" alt="climb">
</div>

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

CSS
/*Вертикальное панорамирование*/
.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;
}

Преобразования

Наклон

Лучшие CSS эффекты при наведении курсора на изображение

HTML
<div class="tilt pic">
  <img src="http://4.bp.blogspot.com/-3QfVDLVQKyg/UhhoBMAY5aI/AAAAAAAAGII/nCseBq08Kwg/s000/car.jpeg" alt="car">
</div>

CSS
/*Наклон*/
.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);
}

Округление

Лучшие CSS эффекты при наведении курсора на изображение

HTML
<div class="morph pic">
  <img src="http://1.bp.blogspot.com/-iQW0XOC57c8/UhhoGlXB43I/AAAAAAAAGJA/5tljT58aFRE/s000/sea.jpeg" alt="beach">
</div>

CSS
/*Округление*/
.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);
}

Фокусирование

Лучшие CSS эффекты при наведении курсора на изображение

HTML
<div class="focus pic">
    <img src="http://2.bp.blogspot.com/-lUMr0fZGQs4/UhhoAicL2AI/AAAAAAAAGIA/TQ_nh1RT-7s/s000/baseball.jpeg" alt="baseball">
  </div>

CSS
/*Фокусирование*/
.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%;
}

Фильтры Webkit

Расплывшиеся очертания

Лучшие CSS эффекты при наведении курсора на изображение

HTML
<div class="blur pic">
  <img src="http://2.bp.blogspot.com/-5uNuklpf00g/UhhoACTie0I/AAAAAAAAGH8/V0MvkAqt-2E/s000/airplains.jpeg" alt="plane">
</div>
CSS
/*Расплывшиеся очертания*/
.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);
}


Обесцвечивание

Лучшие CSS эффекты при наведении курсора на изображение

HTML
<div class="bw pic">
  <img src="http://2.bp.blogspot.com/-4M2ucdYdH0k/UhhoGb30DGI/AAAAAAAAGI8/oJx9BlfFBfY/s000/sea2.jpeg" alt="sea">
</div>
CSS
/*Обесцвечивание*/
.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%);
}

Полировка / яркость

Лучшие CSS эффекты при наведении курсора на изображение

HTML
<div class="brighten pic">
  <img src="http://2.bp.blogspot.com/-54vP-i9Cgxc/UhhoC02MU1I/AAAAAAAAGIg/sh8WYeYTT2o/s000/dj.jpeg" alt="sea">
</div>

CSS
/*Полировка*/
.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%);
}

На этом всё. Жду Ваших вопросов в комментариях. Удачных всем выходных - пока ;)


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger Comment
    Facebook Comment

4 коммент. :

  1. как щедро кто-то перепутал img и pic в кодах )))))
    наверное, это и была адаптация? ;-))

    ОтветитьУдалить
    Ответы
    1. некая адаптация в коде и была, но вроде бы ничего не попутано и всё работоспособно)

      или у Вас возникли проблемы?

      Удалить
  2. Для фокусировки в hover желательно вписать уменьшение высоты и ширины на удвоенную ширину border (например: ширина и высота изображения = 300. в hover нужно вписать width:160px; height:160px;). Поскольку без этого размен изображения увеличивается на удвоенную ширину border (например: ширина и высота изображения = 300. в hover - 440 рх.).

    ОтветитьУдалить
  3. Спасибо за статью! Для Wordpress к стати плагин есть чтобы подобные анимации делать. Вот видеообзор https://www.youtube.com/watch?v=Wtd2e5L47pc

    ОтветитьУдалить