Перехід CSS (властивість висоти) - неможливо змусити його рухатися з нижньої частини - css, css3, перехід

Я використовую властивість висоти для анімації мого DIV, вона з'являється на наведенні іншого елемента - це "рулони" згори. Чи є спосіб обертати анімацію, так що я б отримав його, щоб з'явитися знизу вгору?

HTML:

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

<div id="appear">
<img src="/images/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

Відповіді:

Один із способів зробити це без використання абсолютного позиціонування або зміни розмітки - це перехід a margin-top в той же час, як і висота. Таким чином, CSS може виглядати так:

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="/images/http://data.atria.sk/matmenu/celevyk.jpg" />
</div>

Ось і а JSFiddle демонструвати. (Якщо я неправильно зрозумів ваші наміри, будь ласка, скажіть мені.)

Сподіваюся, це допомагає! Дайте мені знати, якщо у вас є будь-які питання.

перевірити скрипку https://jsfiddle.net/8paj437a/2/

я встановив position:absolute до #appear div і bottom:0; так що він буде приймати висоту з дна.

І зберегти його незмінно зверху. Я помістив його в контейнер і віддаю позицію щодо контейнера.

HTML

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

<div class="container">
<div id="appear">
<img src="/images/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;
}