CSS эффекты для ваших изображений.

Особенно радует, что не нужно никаких jqeury и javascript, для того чтобы сделать красивый эффект – всё работает при помощи CSS3.
Читаем статью и наводим курсор на картинки

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

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

.gluk {
  height: 260px;
  width: 260px;
  overflow: hidden;
  margin: 20px;
  border: 10px solid #EADBBC;
-webkit-box-shadow: 5px 5px 5px #3B1E10;
-moz-box-shadow: 5px 5px 5px #3B1E10;
 -o-box-shadow: 5px 5px 5px #3B1E10;
box-shadow: 5px 5px 5px #3B1E10;
}

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

Увеличение

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

HTML

<div class="grow gluk">
 <img border="0" src="адрес изображения" />
</div>

где,  class=”grow gluk” выполняет подключение к обязательному классу  gluk и к своему эффекту 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;
}

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

HTML

<div class="shrink gluk">
  <img src="адрес изображения" />
</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;
}

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

HTML

<div class="sidepan gluk">
  <img src="адрес изображения" />
</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;
}

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

HTML

<div class="vertpan gluk">
  <img src="адрес изображения" />
</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: -100px;
}

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

Наклон

HTML

<div class="tilt gluk">
  <img src="адрес изображения" />
</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);
}

Следующие эффекты с изображениями хорошо работают только в FF

Округление

HTML

<div class="morph gluk">
  <img src="адрес изображения" />
</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);
}

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

HTML

<div class="focus gluk">
    <img src="адрес изображения" />
  </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%;
}

Поддержка браузеров

IE	Opera	Chrome	Firefox	Safari
Internet Explorer 10 9 частично	Opera 12 и выше 10.5 частично	Chrome 4 и выше 2 частично	Firefox 16 и выше выше 3.5 частично	Safari 4 и выше 3.1 частично