Grayscale Image Hover Effect CSS Example

Grayscale Image Hover Effect CSS. Image grayscale re-color on mouse over the image. This is a cool grayscale hover effect that can apply to any image or client’s logo list without any JavaScript. This is a simple way to show the grayscale or back-and-white image with CSS that converts the color on the mouse hover.

HTML

<div class="middle-div">
    <img src="/images/image-one.jpg" alt="Grayscale Image">
</div>

CSS

.middle-div {
    width: 500px;
    height: 500px;
    margin: 100px auto;
}

/* Grayscale Image Hover Effect CSS */
img {
    max-width: 100%;
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
    transition: 0.5s;
    cursor: pointer;
}
img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}