Как организовать плавное изменение position top ?

Question

[nepster-web]

Собственно реализовываю блоки, при наведении на которые нужно показывать текст с коротким описанием.
Выглядит это как-то так:
jsfiddle.net/70vh9smL

Теперь возник вопрос, как сделать так, что бы div с текстом, который закрывает блок поднимался плавно ?

transition не срабатывает.
Пробовал jQuery animation, но он что то совсем не так работает как хотелось бы.

Ну и пользуясь случаем подскажите пожалуйста как сделать идеальный круг, в центре которого число (класс .count)?

Answer 1

[Иван Беленков]

jsfiddle.net/s1bf5bdL

a) Transition прекрасно работает. Просто необходимо указывать анимируемое свойство во всех состояниях:

.wrap .someclass {
    transition: all .5s ease;
    top: 150px;
}
.wrap:hover .someclass {
    top: 0;
}

b) Чтобы получился круг, вам нужно указать border-radius: 50% для квадрата:

.circle {
    width: 25px;
    height: 25px;
    line-height: 25px; // центрируем текст по вертикали;
    text-align: center; // и по горизонтали;
    border-radius: 50%;
}

Answer 2

[pvgdrk]

$('.background').hover(function(){$(this).animate({top: '-155px'}, 200, 'linear')})

'Пробовал jQuery animation, но он что то совсем не так работает как хотелось бы. '
как не так?