Add fade to image gallery

[LizBaker]

Description

This adds a fade to the right side of the image gallery to suggest there is more to scroll. I'm not sure if we want to add animation and get rid of the fade when you reach the last image 🤷‍♀️ but here's a first pass 🎉

Related Issue(s) / Ticket(s)

Closes #1385

Screenshot(s)

[gatsby-cloud]

Gatsby Cloud Build Report

developer-website-feature/o11y-packs

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 2m

[jpvajda]

I provided the following ux feedback to @LizBaker in slack, also adding here.

1. in Firefox, once the scroll bar disappears you can't scroll the gallery, though in chrome this isn't an issue

2. in light mode the fade is pretty intense

3. I think each image should be clickable and open the image in a new tab so people can view it at a larger scale., --> might be a bug in css

4 I think the fade on the last image should not be present

[jpvajda]

see my last comment for suggestions...

[LizBaker]

@jpvajda fixed the click-ability issue and reduced the fade. I couldn't reproduce the issue in firefox but that may be something that was fixed by fixing the click through. I also didn't come up with a good solution for getting rid of the fade at the end of the scroll so maybe we can make a separate ticket for that?

[jpvajda]

@LizBaker Thanks for working on this I still feel the light-mode fade is a little rough, but I know CSS can take hours to get something like this right. 🤣

Why don't we merge this in and I'll file a Nit to make the fade better on light mode, and also try to remove the fade on the last image.

changes addressed or added to nit list

[nr-opensource-bot]

🎉 This PR is included in version 1.57.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀