'CSS transition (height property) - can't get it to roll from bottom

I use height property to animate my DIV, it appears on hover of another element - it "rolls" from top. Is there a way to rotate the animation, so I would get it to appear from bottom to top?

HTML:

<a href="#" class="show">SHOW IT</a>

<div id="appear">
    <img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>

CSS:

#appear {
    width: 308px;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.show:hover + #appear, #appear:hover {
    height: 331px;
}

JSFiddle

csstransition


Solution 1:[1]

One way to do this without using absolute positioning or altering your markup is to transition a margin-top at the same time as the height. So your CSS might look like:

html, body { background-color: #dedede; }

#appear {
    width: 308px;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    margin-top:331px;
}
.show:hover + #appear, #appear:hover {
    margin-top:0;
    height:331px;
}
<a href="#" class="show">SHOW IT</a>

<div id="appear">
    <img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>

Here's also a JSFiddle to demonstrate. (If I've misunderstood your intentions, please tell me.)

Hope this helps! Let me know if you have any questions.

Solution 2:[2]

checkout the fiddle https://jsfiddle.net/8paj437a/2/

I set position:absolute to the #appear div. and bottom:0; so it will take height from bottom.

And to keep it intact from top. I placed it within a container and give position relative to the container.

HTML

<a href="#" class="show">SHOW IT</a>

<div class="container">
    <div id="appear">
        <img src="http://data.atria.sk/matmenu/celevyk.jpg" />
    </div>
</div>

CSS

.container {
    width: 308px;
    height:331px;
    position:relative;
}
#appear {
    width: 308px;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    position:absolute;
    left:0;
    bottom:0;
}
.show:hover + .container #appear, .container #appear:hover {
    height: 331px;
}

Solution 3:[3]

By default, height transition works from top to bottom. But you can make it work from bottom to top with a very simple trick. All you need is to rotate the div to 180 degrees. This will rotate the transition direction as well. Try this css on your div.

transform: rotate(180deg);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 caramba
Solution 2 Nilesh Mahajan
Solution 3 Simran Singh

Related Questions