JSFiddle - React, Tailwind, and code Playground

by SLonoed

HTML

<div id="wrap">
    <header>
        <h1>Show <a href="#">invisible</a>?</h1>
    </header>    
</div>

CSS

#wrap {
    padding: 30px;
    font-size: 18px; 
}

#wrap a {
  opacity:0;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:color .2s ease-out;
  -ms-transition:color .2s ease-out;
  -moz-transition:color .2s ease-out;
  -webkit-transition:opacity .5s ease-out;
  /* ...and now for the proper property */
  transition:opacity .2s ease-out;
}
#wrap:hover  a{ opacity:1; }