как изменить цветное фото на чёрно - белое с помощью CSS

Всем, доброго времени суток. Красивый эффект для фотографий или других изображений в блоге. Изначально, загруженное изображение в цвете, выглядит чёрно - белым. А при наведении курсора на него, опять становится цветным. Небольшой код CSS поможет достичь такого результата. Ничего сложного.

Для наглядности, скопируйте приведённый ниже код и вставьте в этом редакторе, чтобы понять о чём идёт речь.

<style>
.profile img {
  border-radius: 50%;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: filter 0.5s ease;
  -webkit-transition: filter 0.5s ease;
}
.profile img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}</style>

<div class="profile">
   <img src="https://1.bp.blogspot.com/-xOfXxt_KCN4/XqPLWY3P-TI/AAAAAAAANoQ/lqkM1idY8CYDO_VzswikhrNw60oibAZ2QCLcBGAsYHQ/s1600/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg" alt="Эффект для картинок">
  </div>

Не нужно здесь ни какого фотошопа. Для эффекта серого фона просто используется функция grayscale(), которая и  превращает изображение в чёрно-белое. Значение 100%.  Значения меньше 100% (или меньше 1) линейно меняют цветность картинки.

Я взяла самую простую картинку. Вместо строк серого цвета, вставьте адрес вашего изображения.

 border-radius: 50%;  - добавили закругление углов картинки. Можно убрать, если хотите.

Если захотите использовать такой вариант оформления картинок в одном сообщении, или гаджете, при написании перейдите в формат HTML и вставьте в нужном месте готовый код.

Можно применить этот эффект ко всем изображениям блога. Для этого необходимо зайти во вкладку тема, изменить HTML и в открывшемся окне найти строку ]]></b:skin>. Сразу над ней вставьте сам код  CSS , только без тегов <style> и </style>. Сохраните шаблон.
Теперь при создании поста , в том месте где предполагается картинка с эффектом серого оттенка, нужно, так же в формат HTML, добавить только код div

<div class="profile">
   <img src="https://1.bp.blogspot.com/-xOfXxt_KCN4/XqPLWY3P-TI/AAAAAAAANoQ/lqkM1idY8CYDO_VzswikhrNw60oibAZ2QCLcBGAsYHQ/s1600/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg" alt="Эффект для картинок">
  </div>

Вот и всё.

Благодарю всех за ваше внимание. Всем добра.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :