JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<ul>
    <li><span>Here is some text</span>
    <span class="description">I'am hidden as default and show on Hover</span></li>
    <li><span>Here is some more text</span>
    <span class="description">Hi</span></li>
    </ul>

CSS

ul li
{
    display: block;
    width: 150px;
    height: 150px;
}
ul li .description
{
   visibility: hidden;
   opacity: 0;
   margin-top: 30px;
   transition-property: all;    
   transition-duration: 1s;
}

ul li:Hover .description
{
   visibility: visible;
   opacity: 1;
   margin-top: 0px;
    background-color: blue;
}