Question

I have updated the code I am working on here http://jsfiddle.net/dFfJm/

At the first sliding box where there is only 1 line of text. On the second box there are 3 lines of texts.

As you can see it does not look right, there is a large empty sliding area in box 1.

My question is how to keep it showing one row by default and when the user hovers the sliding part will be as high as the title length?

Thank you.

Answer 1

Use

$(myElement).height()

To find the dynamic width of your caption text, and use it like this:

$(".cover", this).stop().animate({
    top:  240-$(this).find('h3').height() + 'px'
}

jsFiddle example. Note that the black border does nor reach the end of the text, but the jQuery .height() is totally correct. I added a box with more text in the jsFiddle to demonstrate that.