Move div with dynamic height out of its parent container

Question

I\'m trying to move a div with a dynamically changing height out of it\'s parent div and back in.

The problem is the dynamically height, otherwise I could easily set the

Answer 1

You could use CSS transform:translateY(100%) property, so the height is calculated based on the element itself. Then reset the value to 0 on hover.

Inspect the element, you'll be able to see exact the height and position of it.

Also take a look of support tables for transform, and prefix it if necessary.

Updated JsFiddle

.outer {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    background: grey;
    overflow: hidden;
}
.inner {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: aqua;
    transition: 0.4s;
    transform: translateY(100%);
}
.outer:hover .inner {
    bottom: 0;
    transform: translateY(0);
}

    
Some expanding text here..