[Resolved] CSS grayscale effect no longer applies when images treated as links

[NBC]

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?

[David]

Hi there,

can you add a link to one of the images so we can take a look?

[NBC]

I put the link, and temporary log-in credentials, in the “Private information” area. I’ll add it again.

Note that I have deleted the links from the images at present because they interfere with the grayscale effect.

[David]

Are you able to put a link on one of the images ? So i can see what CSS is required

[NBC]

Tried it again, and this time, it’s working.

In the immortal words of the late Gilda Radner, “Never mind.”

[David]

Haha – glad to hear you got it working 🙂

[Author]

Posts