Creating Hover Effects: Transitioning Images from Black and White to Color

Requirement: By default, the image will appear in black and white. When the user hovers over the image, it will transition to color.
How can we build this, It’s simple.

/* Initially */
img {
    filter: grayscale(100%);
    transition: filter 0.3s ease; /* Smooth transition to color */
}

/* On hover */
img:hover {
    filter: none;
}