<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Css grayscale and sepia filters test</title>
</head>
<body>
  
  <img class="bw" src="https://cdn.onemorething.nl/uploads//2019/07/Apple-Park-16x9-375x267.png" alt="">
  
  <img class="sepia" src="https://cdn.onemorething.nl/uploads//2019/07/Apple-Park-16x9-375x267.png" alt="">
  
</body>
</html>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 1rem;
}

img {
  transition: filter 0.4s ease-out;
}

img.bw {
  filter: grayscale(100%);
}
img.bw:hover {
  filter: grayscale(0%);
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.