Секция с фотографиями и раскрывающимся их описанием

Изначально секция рассчитана на три блока, но по аналогии их можно легко увеличить или уменьшить.

Для плавности раскрытия описания фотографии используется коротенький JavaScript.

Пример:

Пример сделан на варианте оформления секции с достопримечательностями города Саратова

Консерватория

Саратовская государственная консерватория имени Л.В. Собинова (СГК) — высшее музыкальное учебное заведение в Саратове, третья по счёту консерватория в России. Основана в 1912 году на базе музыкального училища.

Журавли

Мемориальный комплекс «Журавли» в парке Победы на Соколовой горе г. Саратова — памятник саратовцам, погибшим во время Великой Отечественной войны 1941—1945 годов. Мемориальный комплекс «Журавли», один из символов Саратова.

Мемориальный комплекс «Журавли» в парке Победы на Соколовой горе г. Саратова — памятник саратовцам, погибшим во время Великой Отечественной войны 1941—1945 годов. Мемориальный комплекс «Журавли», один из символов Саратова.

Цирк

Сара́товский цирк и́мени бра́тьев Ники́тиных — цирк в Саратове, второй стационарный цирк в Европе (после Пензенского). Основан в 1876 году цирковыми предпринимателями и артистами братьями Никитиными. Является федеральным объектом, подчиняющимся Министерству культуры РФ.

HTML:

CSS:

JS:

Для чего нужен JavaScript

Так как изначально нам неизвестно, сколько точно контента будет в каждом блоке, а плавно трансформировать с точной высоты на неопределенную (100% или auto) нельзя, то можно использовать 4 разных способа:

  • Задать при ховере всему описанию в контейнере face-2 конкретную высоту.
    В этом случае плавность будет такая же, как на примере, но в описании будут пустоты или прокрутка, т.к. высота каждого блока одинаковая.

  • Задать при ховере каждому описанию в контейнере face-2 разную высоту
    Результат будет 1 в 1 как на примере, только придется на глаз вычислять эту самую высоту.

  • Использовать CSS-свойство max-height, которое будет иметь значение высоты контейнера, а при ховере иметь раз в пять больше.
    Решение удобное, но при таком раскрытии может возникать прыжок.

  • Использовать маленький скрипт, как в этом примере, который определит высоту контейнера с контентом и передаст это значение в CSS для точного перехода между двумя величинами.
    При изменении кол-ва блоков, скрипт менять не стоит, нужно будет лишь добавить новый класс. Для четвертого блока он будет таким:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Дмитрий:

    Круто!
    Не будет ли слишком нагло, если помечтать, еще бы добавить решение, когда к фону можно применить parallax, тогда — вообще пушка будет!!!))
    В очередной раз респект за Блог и темы, которые поднимаете 😉

    Ответить
    • Alexander:

      Можно использовать это решение, но у меня в мозиле какое то дергание возникает, в хроме отлично все.
      Результат

      Или использовать что то более профессиональное, например:
      parallax.js или simpleParallax

      Ответить
      • Дмитрий:

        Уфы!
        Здорово)
        Да, в мозиле прослеживается подергивание.
        Ок. Буду играться — пища для ума здоровская!!!
        Благодарю!

        Ответить