Add CSS animation on hover

[Shivam-AfA]

Desired Situation

A CSS animation similar to the one in the image (a ripple effect) is required when the object is hovered.

SVG link: https://github.com/layer5io/layer5/blob/master/src/collections/integrations/nginx-service-mesh/icon/color/nginx-service-mesh-color.svg

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma.
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[leecalcote]

Should be SVG image(s) only. Try manipulating the CSS from the on hover affect on this page: https://meshery.io/catalog.

[sanyamjain036]

I want to work on it; assign this to me.

[leecalcote]

@sanyamjain036 what do you think about the css animation on the Meshery Catalog page?

[sanyamjain036]

On hovering those svgs at the top of the page makes me feel dizzy. Also, I can animate catalog boxes while scrolling. @leecalcote Should I do it, with this PR?

[sanyamjain036]

https://user-images.githubusercontent.com/75247883/222574677-e4370bb0-0fdb-44f9-acc6-a87f3fb8f6fa.mov

is it fine?

[niranjan-kurhade]

https://user-images.githubusercontent.com/97905637/230494497-85a87db5-cb6f-4e0d-9447-eacf86aeb99f.mp4

Hey @Shivam-AfA @leecalcote, I have made this CSS animation similar to the one in the image (a ripple effect) when the object has hovered. It's been more than a month since the issue was addressed. Can I work on this? Please assign this issue to me.

[leecalcote]

Looking good, @niranjan-kurhade

[niranjan-kurhade]

Thanks, @leecalcote for assigning me this issue. Which object should have the ripple effect when it is hovered? Do I have to give the ripple effect on the meshery page(Different repo)?

[leecalcote]

@shivam-afa

[niranjan-kurhade]

Hey, @Shivam-AfA Can you guide which object should have the ripple effect on the layer5 website?

[Shivam-AfA]

@niranjan-kurhade Thanks for implementing this, currently we're not specific about the place where this should be used. You can add this animation in the form of a react-component in the repo. It'll be published when a suitable UX need is identified.

You can add this under src/components directory.

[leecalcote]

Another way of saying this is that @Shivam-AfA needs to complete his work so that this new animation can land on https://layer5.io/cloud-native-management/meshmap/design. 😉There is an open PR on this topic.