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

29 мая, 2014

Alexjc

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

Изображение должны обязательно принадлежать классу 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;  
}

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

}

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

Увеличение

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

HTML

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

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

/*Увеличение*/

.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 pic">
  <img src="http://4.bp.blogspot.com/-3M7MgqrqRfw/UhhoB6E-OwI/AAAAAAAAGIU/8w54W8rZLns/s000/city.jpeg" alt="city">
</div>

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

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

.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 pic">
  <img src="http://1.bp.blogspot.com/-sTY94AqZaPs/UhhoFqoQyMI/AAAAAAAAGI0/SmnsCkw7SgU/s000/kick.jpeg" alt="kick">
</div>

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

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

.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 pic">
  <img src="http://1.bp.blogspot.com/-OCi_1Jb2nN8/UhhoCRChZNI/AAAAAAAAGIc/ndLJqrMbOOU/s000/climb.jpeg" alt="climb">
</div>

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

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

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

}

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

Наклон

HTML

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

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

/*Наклон*/

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

}

Округление

HTML

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

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

/*Округление*/

.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 pic">
    <img src="http://2.bp.blogspot.com/-lUMr0fZGQs4/UhhoAicL2AI/AAAAAAAAGIA/TQ_nh1RT-7s/s000/baseball.jpeg" alt="baseball">
  </div>

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

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

.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

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

HTML

<div class="blur pic">
  <img src="http://2.bp.blogspot.com/-5uNuklpf00g/UhhoACTie0I/AAAAAAAAGH8/V0MvkAqt-2E/s000/airplains.jpeg" alt="plane">
</div>

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

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

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

}

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

HTML

<div class="bw pic">
  <img src="http://2.bp.blogspot.com/-4M2ucdYdH0k/UhhoGb30DGI/AAAAAAAAGI8/oJx9BlfFBfY/s000/sea2.jpeg" alt="sea">
</div>

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

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

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

}

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

HTML

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

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

/*Полировка*/

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

}

Money doesnt have to be the www.homework-writer.com spur or the genuinely rich members of our profession would not continue to write productively and well!

Posted in Прочее

Вы можете оставить ответ, или trackback с вашего сайта.