Как показать картинку снизу вверх?

Question

[Николай]

Здравствуйте! Что-то не могу решить тривиальную задачу, уже как час:
Необходимо что бы картинка появлялась снизу вверх, но не "растягивалась", а именно появлялась (как бы загружалась)

Спасибо!

Answer 1

[Sergey Vydayko]

есть уже готовый вариант это animate.css, или самому добавить анимацию. jqbook.net.ru/jquery/Effects

Comments

[Николай]

в том то и проблема, что не особо вникаю, как это применить (

[Sergey Vydayko]

Николай: смотри, я посоветую тебе заюзать animat.css вот сайт https://daneden.github.io/animate.css/, там поклацай на нужный тебе эффект и в доках прочитай как юзать, это если ты спешишь, если нет, читай ту статью которую скинул, там написано, есть примеры уже готового кода

[Николай]

Sergey Vydayko: в той статье нет нужного мне "свойства", где нужно не "разворачивание" а именно появление, без искажения картинки :)

[Николай]

Sergey Vydayko: как и в animate.css... =(

[Sergey Vydayko]

$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideUp("slow");
} else {
$("div").hide();
}
});

смотри, здесь написано, что при клике выполняется проверка, если проверка истинна, выполняется условие для показа картинки, если не истина т.е. лож, тогда скрывается!

[Sergey Vydayko]

тебе при hover нужно показывать?

[Николай]

Sergey Vydayko: slideUp - растягивает изображение.. А мне нужно появление снизу вверх. Как будто большая картинка долго грузиться, только не сверху вниз, а наоборот)

[Николай]

Sergey Vydayko: И слайдап - наверх убирает, а мне надо как раз наоборот :D

Answer 2

[Александр Таратин]

https://learn.javascript.ru/css-transitions
htmlbook.ru/css/transform
htmlbook.ru/css/clip

Comments

[Николай]

в том то и проблема, что не особо вникаю, как это применить, и можно ли с помощью этих свойств решить данную задачу

Answer 3

[DTX]

codepen.io/anon/pen/PzGLBX

Answer 4

[gleendo]

Если я правильно понял вопрос, то можно так codepen.io/evg_/pen/JKRzvy

Comments

[Николай]

К сожалению, не правильно :(
Нужно что бы картинка не двигалась, а именно как бы "загружалась" снизу вверх.