Implement Logo Hover Effect

[Tharanishwaran]

Desired feature or idea:

• Implement a hover effect on the logos displayed on the OpenTelemetry.io website. When a user hovers over a logo, it should change to display the original trademark colors of that brand.

• This would provide a more authentic and visually engaging experience for users. Attached are example images demonstrating the desired effect.

Current Behavior :

Screencast.from.26-01-25.11.30.22.PM.IST.webm

Desired Behavior :

Screencast.from.26-01-25.11.33.43.PM.IST.webm

[Tharanishwaran]

can i work on this issue ?

[svrnm]

@Tharanishwaran can you share some code (e.g. in a draft PR) how this would look like? On the one hand I like that feature, on the other hand I want to avoid that we introduce a lot of javascript/CSS overhead for just accomplishing this. I would especially appreciate if this would be a pure CSS-solution, which should be possible with modern features.

@open-telemetry/docs-approvers WDYT?

[Tharanishwaran]

Thank you for the feedback @svrnm! I agree that a pure CSS solution would be ideal to minimize overhead. Here's how I'm thinking of implementing this:

We could use CSS filters to create the grayscale effect by default, then remove them on hover to reveal the original colors. Something like:

.logo-grid img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.logo-grid img:hover {
  filter: grayscale(0%);
}

[svrnm]

We could use CSS filters to create the grayscale effect by default, then remove them on hover to reveal the original colors. Something like:

The logos are from fontawesome and from what I see, they do not have color by default, so that would mean we need to replace them first with colored versions, so it's unfortunately not as easy as that, especially for colorful logos like the slack one

[chalin]

I'd (strongly) vote to stick with the Docsy default for footer icons, that is, to use tooltips.