There are a couple examples of how to create a ripple effect in TailwindCSS for click:
- https://tailwind-elements.com/docs/standard/methods/ripple/#!
- https://codepen.io/vituja1/pen/oNWzNwq
And basically it's about creating an element that grows inside the boundary of the parent button and vanishes.
targetElement.addEventListener('click', e => {
// create an element, append it to the target, let it grow, and then remove it
});
However, I want to create the ripple that acts on hover, not on click. As you can see here:
https://www.templatemonsterpreview.com/demo/187467.html
How can we achieve this effect in tailwind?