<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>
верх
Код:
<style> .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} </style>