Выполнить наложение сверху вниз, а не сверху вниз

Question

Я пытаюсь дать эффект процента над зданием. Поэтому у меня есть надпись, идущая перед изображением, чтобы дать какой-то эффект поднятия. Он работает, но идет сверху вниз, а не снизу вверх. Как я могу ссылаться на theset, чтобы быть прав?

Вот что он выглядит на данный момент

Heres мой код:

<script> 
$(document).ready(function() { 
    overlay = $("#overlay"); 
img = $("#myimg"); 
img.load(function(){ 
    var myPercent = 30; 
    overlay.width($("#myimg").width()); 
    var myHeight = $("#myimg").height()/100 * myPercent; 
    alert(myHeight); 
    overlay.height(myHeight); 
    overlay.css("top", img.offset().top + "px"); 
    overlay.css("left", img.offset().left + "px"); 
}); 
}); 

</script> 

<div id="overlay" class="overlay"></div> 
<img id="myimg" src="building.png" /> 

Edit: http://jsfiddle.net/7vA9U/ jsfiddle

Answer 1

Дайте НАКЛАДКИ следующий CSS:

#text-ovrelay { 
    position: absolute; 
    top: auto; 
    bottom: 0; 
} 

Таким образом, он состыковался с низом, а не сверху.

EDIT: Взял ваш код и немного изменил его. Check it out.