Как организовать плавное изменение position top ?
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%;
}
$('.background').hover(function(){$(this).animate({top: '-155px'}, 200, 'linear')})
'Пробовал jQuery animation, но он что то совсем не так работает как хотелось бы. '
как не так?