ForumDesign TechSupport - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Фонд форумаРеклама на сайте
Стать модераторомОтзывыДонат

Предложения

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

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


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог кодов CSS » Блоки с выскальзывающим описанием (CSS3)


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

Сообщений 11 страница 12 из 12

11

mintemero
спасибо, а тогда другой вопрос - можно ли сами блоки уменьшить до наведения на него мышкой непосредственно? тем самым также уменьшив пространство

0

12

Asari

<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>

width: 250px;    /* Ширина блока */
    height: 60px;      /* Высота блока */

В самой структуре ведь все расписано, меняйте везде ширину и высоту и все.

0


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог кодов CSS » Блоки с выскальзывающим описанием (CSS3)


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