Как создать или доделать слайдер, чтобы нижняя часть контейнера расширялась?

Question

[AngelSword]

Доброго времени суток. Есть сайт Ссылка , там есть довольно неплохой слайдер, и когда к нему подводишь мышку, он расширяется.


Хочу такой слайдер оптимизировать под Joomla, нашел подобный модуль "BT Content Slider", изменил границы и т.д., все также пролистывается, но вот как сделать, чтобы расширялся, этого я не знаю.

Answer 1

[Анна Бакурова]

Задаёшь каждому блоку определённую высоту в css (так чтобы текст был не виден) и пишешь overflow: hidden. потом через js при hover на элементе вызываешь анимацию и изменяешь высоту на auto

Comments

[Анна Бакурова]

О сейчас нашла решение которое делала Я. Просто ставила элементу класс у которого определённая высота а при ховере просто убирала этот класс.

Answer 2

[Facetrollex]

Скрываешь контент, который должен выезжать и на событие mouseover вешаешь функцию, которая будет показывать контент (в твоем случае можешь использовать slideIn).

Comments

[AngelSword]

Сейчас попробую. Спасибо за отзывчивость.

Answer 3

[Сергей Сова]

можно вообще без JS

<div class="your_slider_block">
    ...text...
    <div class="your_hided_block">Скрытый контент</div>
</div>

И теперь стили

.your_hided_block {
   overflow: hidden;
   height: 0;
   transition: height .25s;
}
.your_slider_block:hover .your_hided_block {
    height: 100px; /* Нужная высота блока */
}

JSFiddle