CSS grayscale effect no longer applies when images treated as links

I've built a grid of client logos that runs four columns wide by four rows deep. Here's an example of one row:

<div class="grid-25 tablet-grid-25 mobile-grid-100 first-column">
<img src="[LINK TO LOGO FILE]" alt="[ALT TEXT]" style="width="400" class="logo"></a>
</div>

<div class="grid-25 tablet-grid-25 mobile-grid-100 second-column">
<img src="[LINK TO LOGO FILE]" alt="[ALT TEXT]" style="width="400" class="logo"></a>
</div>

<div class="grid-25 tablet-grid-25 mobile-grid-100 third-column">
<img src="[LINK TO LOGO FILE]" alt="[ALT TEXT]" style="width="400" class="logo"></a>
</div>

<div class="grid-25 tablet-grid-25 mobile-grid-100 fourth-column">
<img src="[LINK TO LOGO FILE]" alt="[ALT TEXT]" style="width="400" class="logo"></a>
</div>

The class "logo" applies CSS to make the image appear in grayscale unless your cursor hovers over it:

img.logo {
	margin: 15px;
	-webkit-filter: grayscale(100%) !important;
	filter: grayscale(100%) !important;
}

img.logo:hover {
	-webkit-filter: grayscale(0) !important;
	filter: grayscale(0) !important;
}

When I first built this page, none of the client sites were built so I did not treat the logos as links to the respective client sites. I'm gradually making headway with that and wanted to start adding the links.

When I treat the logos as links, however, the "logo" class no longer applies. The images just appear in color.

Is there any way to preserve the "logo" class hover effect and still make these images serve as links?