Post-hover glitch?

Hello, 

I have this code 

.list-item .list-image { border-radius: 12px;
 filter: grayscale(100%);} 
div:hover .list-item .list-image:hover { border-radius: 12px !important;
  filter: none;
  transform: scale(1.1);
  transition: .5s ease all;
} 

which gives this following effect (video)

But for some reason the border-radius disappears one hover. Ideally I would like to make sure that the transition includes the radius-border. 

Thank you in advance! 

Can you share link to page where you have problem? We can check problem easier.

https://thevalleycleaningservices.squarespace.com/

On the services part. Thank you!

On 5/13/2024 at 4:51 PM, Gigi-C said:

https://thevalleycleaningservices.squarespace.com/

On the services part. Thank you!

Add this CSS code under

.list-item-media-inner {
    border-radius: 12px;
}
.list-item-media-inner img, li:hover img {
    transition: all 0.3s;
}