Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
width: 450px;
height: 400px;
}
.example{
background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"),
linear-gradient(0deg, white 33%, black 66%), url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
background-position: 0px 0px, 0px 0%, 0px 0px;
background-size: cover, 100% 300%, cover;
background-blend-mode: luminosity, multiply;
transition: all 1.5s;
}
.example:hover {
background-position: 0px 0px, 0px 70%, 0px 0px;
}
</style>
</head>
<body>
<h2>Преобразование изображения в оттенки серого с помощью HTML/CSS</h2>
<div class="example"></div>
</body>
</html>