JSFiddle - React, Tailwind, and code Playground

by TheNix

HTML

<h1>
Hover me (opacity only)
  <span>🙌🙌</span>
</h1>

<h2>
Hover me (opacity + visibility)
  <span>🤷‍♂️🤷‍♂️</span>
</h2>

CSS

h1 span {
  opacity: 0;
  transition: opacity 2s;
}

h1:hover span {
  opacity: 1;
}

h2 span {
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s;
}

h2:hover span {  
  opacity: 1;
  visibility: visible;
}