CODEWITHSUNDEEP
cssanimationtransition
Ryan Yang
Ryan Yang

Reputation: 25

CSS transition or animate slide up from top:100% to bottom:0

The inner div has a variable height depends on the length of the text inside, which is always shorter than the outer div. I'd like the inner overlay div to slide up from top:100% to bottom:0 when the outer div is hovered. My CSS code below does not produce the slide up effect I want. It simply pops up the inner div at the bottom of the outer div.

<div class="outer">
    <div class="inner">This is a content block.</div>
</div>

.outer {
    position:relative;
    background-color:#eee;
    width:150px; height:150px;
    overflow:hidden;
}
.inner {
    position:absolute; z-index:10;
    box-sizing:border-box; width:100%; padding:10px;
    background-color:rgba(0,0,0,0.5); color:#fff;
    left:0; right:0; top:100%; bottom:auto;
    transition:top 300ms, bottom 300ms;
}
.outer:hover .inner {
    top:auto; bottom:0;
}

Upvotes: 2

Views: 5687

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

your code cannot work because transition doesn't work from/to auto.

you could set bottom:0 by default and play with transfom, e.g.

.outer {
    position:relative;
    background-color:#eee;
    width:150px; height:150px;
    overflow:hidden;
}
.inner {
    position:absolute; z-index:10;
    box-sizing:border-box; width:100%; padding:10px;
    background-color:rgba(0,0,0,0.5); color:#fff;
    left:0; right:0; bottom:0;
transform: translateY(100%);
    transition: transform 300ms;
}
.outer:hover .inner {
    transform: translateY(0);
}

Upvotes: 2

Related Questions