BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

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

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

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

Основной код

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

* {
  -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);
}

Картинка при наведении курсора повернется на 100 влево (Строка№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%».
За поворот изображения на 3600 отвечает свойство 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).

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Юрий

    Классные эффекты, возьму на заметку. Только в демо начиная с размытия (картинка с глазом) в Мозилле у меня они не срабатывают. Первые 7 работают и в Мозилле. А в Хроме работают все. Так что не во всех браузерах такая красота себя проявит. Но на худой конец, картинка то все-равно останется картинкой, хуже не станет :smile:

    Ответить

  2. vip

    скажите как сделать 6. Эффект «Поворот изображения с изменением формы» с поддержкой во всех браузерах. То есть таких как опера. софари. хром

    может можно хотя бы поставить чтобы в этих браузерах не изменялась форма?

    Ответить

  3. vip

    извините в хроме нет проблем. только опера, сафари

    Ответить

  4. Александр

    Здравствуйте.Мне нравиться эффект при наведении на своем блоге. Хотелось бы извлечь этот эффект из своего сайта. Не могли бы вы помочь? Спасибо

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Александр! Я бы с радостью, но на это нет у меня времени! Попробуйте посмотреть в исходном коде.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 787
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4386