How to create or complete a slider so that the bottom of the container expands?

Question

JavaScript

Good day. There is a site Link , there is a pretty good slider, and when you move the mouse over it, it expands.


I want to optimize such a slider for Joomla, I found a similar module "BT Content Slider", changed the borders, etc., everything also scrolls, but I don't know how to make it expand.

Answer 1

You give each block a certain height in css (so that the text is not visible) and write overflow: hidden. then through js when hover on the element you call the animation and change the height to auto

Answer 2

You hide the content that should go out and on the mouseover event you hang up a function that will show the content (in your case, you can use slideIn).

Answer 3

possible without JS at all

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

And now styles

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

JSFiddle