<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h2>Как отобразить изображение в оттенках серого с помощью HTML/CSS</h2>
<img src=" /uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"
width="400" height="300" alt="tree" />
</body>
</html>