Главная » Эффекты для сайта » 13 красивых CSS эффектов для изображений

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

2014-10-17 / Вр:23:51 / просмотров: 29667

Сегодня вы попробуете украсить свой сайт или блог красивыми эффектами для изображений с помощью CSS и обычного HTML кода. Да, именно CSS и обычного HTML кода, без использования языка программирования PHP, JavaScript, jQueri и прочих.
Что могут эффекты, предложенные мной на блоге BlogGood.ru:

плавно увеличивать и уменьшать изображения;
вертикально и горизонтально смещать изображения;
наклонять или приводить в полный поворот изображения;
закруглять изображения;

А также и такие эффекты:

размытие, осветление, контрастность, сепия;
плавный переход с цветного изображение в черно-белое;
инверсия цвета.

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

[посмотреть демонстрацию]

Основной код

Этот код применяется ко всем эффектам, которые будут предложены для вас далее:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #333;
}

.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» будут общими для всех изображений. Для всех изображений установлена белая рамка в 10px (строка №13). Указываются одинаковые размеры изображения для высоты и ширины в 300px (строка №15, №16). Отступ от блоков в 20px (строка №17). Чтобы картинка не выходила за указанные приделы, прописываем «overflow: hidden;». Если для вас все это непонятно, настоятельно рекомендую прочитать основы CSS.

Приступаем к эффектам.

1. Эффект «Увеличение»

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="grow pic">
 <img src="bloggood-1.jpg ">
</div>

Строка №2, укажите путь к изображению, размер которого 400 х 400px.

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

Изображение по сути 400 х 400px, но мы уменьшим его под наш блок 300 х 300px (Строка №3 и №4).
Изображение изменяется плавно к исходному изображению 400 х 400px (Строка №14 и №15). За плавное изменение размеров отвечает свойство transition, где указанно 1 секунда. (Строка №6 - №10).

2. Эффект «Уменьшение»

По сути, это один и тот же код, только нужно поменять размеры и изображение плавно с больших размеров 400 х 400px уменьшиться на 300 х 300px.

В HTML файл между тегами <body></body> вставьте вот этот код:

<div class="shrink pic">
  <img src=" bloggood-2.jpg ">
</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;
}

3. Эффект «Горизонтальное смещение»

Этот эффект меняет позиции блока. То есть, если навести курсором на картинку, изображение сместится в сторону.

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="sidepan pic">
  <img src="bloggood-3.jpg">
</div>

В строке №2 укажите путь к изображению, размер которого 600 х 300px.

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

Чтобы картинка сместилась влево, укажите в свойстве «margin-left» значение «-200». Если значение указать «200», смещение будет в правую сторону.

4. Эффект «Вертикальное смещение»

По сути, это один и тот же код, только нужно вместо свойства «margin-left» прописать «margin-top» и изображение при наведении курсора плавно будет двигаться вверх.

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="vertpan pic">
  <img src="bloggood-4.jpg">
</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;
}

Если в свойствах «margin-top» указать значение «200», смещение изображения будет вниз.

5. Эффект «Наклон»

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

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="tilt pic">
  <img src="bloggood-5.jpg">
</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);
}

Картинка при наведении курсора повернется на 10⁰ влево (Строка№11-№15). Вы можете увеличить градус поворота самостоятельно.

6. Эффект «Поворот изображения с изменением формы»

Это мой любимый эффект. При наведении курсора мышки на изображение, оно делает один круг вращения, при этом квадратная форма меняется в круглую.

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="morph pic">
  <img src="bloggood-6.jpg">
</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);
}

За закругление углов отвечает «border-radius» со значением «50%».
За поворот изображения на 360⁰ отвечает свойство transform.

7. Эффект «Фокусировка изображения»

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

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="focus pic">
    <img src="Bloggood-7.jpg">
</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%;
}

Здесь, думаю, вам все понятно: border отвечает за толщину рамки и border-radius за радиус закругления.

8. Эффект «Размытие»

При наведении курсора мышки на четкое изображение оно будет становиться размытым.

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="blur pic">
  <img src="bloggood-8.jpg">
</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);
}

За размытие отвечает свойство «webkit-filter: blur» с параметрами 5px.

9. Эффект «Черно-белое изображение»

При наведении курсора мышки на цветное изображение, оно тут же становится черно-белым.

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="bw pic">
  <img src="bloggood-9.jpg">
</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%);
}

Насколько сделать черно-белым изображение отвечает фильтр «webkit-filter: grayscale» со значением «100%». Можете указать собственное значение от 1%-100%.

10. Эффект «Осветление»

Затемненное изображение, при наведении на него курсора мышки, становится ярче.

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="brighten pic">
  <img src="bloggood-10.jpg">
</div>

В CSS вставьте вот этот код:

/*осветление изображения*/
.brighten img {
  -webkit-filter: brightness(10%);
  -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(100%);
}

Изначально затемняет изображение на «10%» (строка №3)

При наведении курсора мышки, осветляет изображение на «100%»(строка №12)

11. Эффект «Сепия»

Тоже довольно неплохой эффект, с помощью которого изображение превратится в тональность сепия.
В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="sepia pic">
  <img src="bloggood-11.jpg ">
</div>

В CSS вставьте вот этот код:

/* Сепия*/
.sepia 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;
}

.sepia img:hover {
  -webkit-filter: sepia(100%);
}

12. Эффект «Контрастность»

Я думаю, само название уже говорит о том, что при наведении на изображение курсора, картинка станет насыщенней и контрастней.
В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="contrast pic">
  <img src="bloggood-12.jpg">
</div>

В CSS вставьте вот этот код:

/*Контрастность изображения*/
.contrast 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;
}

.contrast img:hover {
  -webkit-filter: contrast(185%);
}

Обратите внимание на строку №11. Если указать значение «100%», изменения не произойдут. Если процент сделать больше «100%», например «185%», изображение станет контрастней. Если процент сделать меньше «100%», например «60%», изображение потускнеет.

13. Эффект «Инверсия»
Это тоже один из моих любимых эффектов. Как-то по «металёвому» смотрится металл смайлик .

В HTML файл вставьте между тегами <body></body> вот этот код:

<div class="invert pic">
   <img src="bloggood-13.jpg">
</div>

В CSS вставьте вот этот код:

/*Инверсия изображения*/
.invert 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;
}

.invert img:hover {
  -webkit-filter: invert(100%);
}

Значение инверсии задается от 0% до 100% (строка №11).

Вот и все! Надеюсь, статья вам понравилась! Если понравилась, жмите на лайк социальных сетей.