JSFiddle - React, Tailwind, and code Playground

by mintemero

HTML

<div class="fmenu">
<a href="ссылка">
    <h5>название</h5>
    <div>описание</div>
</a>

<a href="ссылка">
    <h5>название</h5>
    <div>описание</div>
</a>
<a href="ссылка">
    <h5>название</h5>
    <div>описание</div>
</a>
</div>

CSS

.fmenu a {	                                                         /* Стиль блоков */
overflow: hidden;  /* Скрываем прокрутку */
text-decoration: none !important;
display: block; 
width: 250px;    /* Ширина блока */
height: 60px;      /* Высота блока */
margin: 0 20px 20px 0;  /* отступы */
background: rgba(219, 226, 232, 0.5);   /* фон блока */
border: 1px solid #ccc;  /* границы блока */}


.fmenu h5 {                                                /* Стиль заголовков */ 
    margin: 0;
color: #222;    /* цвет заголовка */ 
text-align: center;
height: 60px;          /* высота блока */
font: italic 18px/60px Georgia, Serif;    /* Вертикальное центрирование текста за счет равных высот строки и элемента */
opacity: 1;
-webkit-transition: all 0.2s linear;    /* плавность перехода */
-moz-transition: all 0.2s linear; 
-o-transition: all 0.2s linear;}




.fmenu a:hover h5 { 
margin-top: -60px;     /* Выскальзывание описания (равно значению высоты блока) */
opacity: 0;            /* прозрачность */
}


.fmenu div {                                                      /* Стиль описания */
background: #000 17px 17px no-repeat;       /* цвет фона */                       
height: 60px;                              /* высота блока */
position: relative; 
color: white;                               /* цвет текста */
font: 12px/15px Georgia, Serif;              /* шрифт */
padding: 5px; 
opacity: 0;             /* прозрачность */                                
-webkit-transition: all 0.2s linear;            /* плавность перехода */
-moz-transition: all 0.2s linear; 
-o-transition: all 0.2s linear;}
.fmenu a:hover div { 
opacity: 1}