Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Фишки и примочки » Блоки с выскальзывающим описанием (CSS3)


Блоки с выскальзывающим описанием (CSS3)

Сообщений 1 страница 5 из 5

1

Автор: 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>


серым - подсказки, что к чему.

0

2

Можно вопрос, а блоки могут располагаться горизонтально?

0

3

А как их в бок засунуть? А то они у меня вверху торчат

0

4

Ка сделать, что бы с боку было?

0

5

Axel2899
Дарю +
Смотря с какого боку, как и зачем.)
Если еще актуально, то можно примерный эскиз или другое более подробное описание?

0


Вы здесь » Кот » Фишки и примочки » Блоки с выскальзывающим описанием (CSS3)


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC