Нонче тут

Сейчас 49 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Особенно радует, что не нужно никаких 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 частично
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.