Creating ripple effect in TailwindCSS, but not on click, rather on hover

Viewed 80

There are a couple examples of how to create a ripple effect in TailwindCSS for click:

  1. https://tailwind-elements.com/docs/standard/methods/ripple/#!
  2. 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?

0 Answers
Related