HTML 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
       
         <div class="div">
            <img src="1.jpg" alt="">
            <img src="5.jpg" alt="">
            <img src="3.jpg" alt="">
            <img src="4.jpg" alt="">
            <img src="2.jpg" alt="">
         </div>   
</body>
</html>

css
.div img {

    filter: saturate(0%);
    width: 10%;
    border: 2px solid white;
    height: 70%;
    object-fit: cover;
    border-radius: 12px;
    transition: all ease 0.4s;
    cursor: pointer;
}

.div img:hover {
    filter: saturate(100%);
    width: 50%;
}