Displaying fields on top of each other (as an overlay)

Hello,

I have a view which displays images attached to nodes. The title of these nodes is displayed on top of the image, as an overlay with a transparent background.

Currently I am using CSS to place the views-field-title -40px upwards; like this:

position: relative;
top: -40px;

However, as you can see this is a very static way to do this. The main problem I have is that it doesn't take into account if there is more or less text in the title field (the number of lines).

So I was wondering if anybody knows a more flexible way to achieve this goal --> to make the title field adjust it's size according to the number of text lines it contains, but still being aligned as the overlay on the image.

Thanks in advance,

Kind regards.