Автор: mintemero
Первоисточник: ForumDesign TS
Блоки с выскальзывающим описанием (CSS3)
ДЕМО
Туда где хотите видеть блоки:
<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>
красное - единичный блок. Его копируем столько раз, сколько хотим блоков.
В html-верх:
<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>
серым - подсказки, что к чему.
