Different image to appear on hover

Hello,

Does anyone know how i would replace a thumbnail image on hover? Each image will replace one of exactly the same dimensions.

I have tried the following:

#projectThumbs a[href="/summer-of-sport/"] img:hover {

background: url("https://images.squarespace-cdn.com/content/v1/5da08b90cec702042e7bd75b/1571842245151-X71IZHOCMO4NWBYCFDQX/ke17ZwdGBToddI8pDm48kBnsafcbTaEy0qOizt2WQ9p7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0hKSnD_p9gN_SPga0QCfUjWrQnhO0xA8lZ7BDb1h3OEMwxfqOlkhHMTRjErZ5TgWHQ/Tower+bridge+hover.png");

   background-size: 100% !important;

}

But it seems that the hover image then sits behind the original but I need it in front of it.

Can anyone help?

Thank you

https://greyhound-keyboard-sa3k.squarespace.com/