How to position an image above the content

Question

I am trying to position an image above (NOT before) the text. Below is the code I have so far. I also posted the result I am getting and the one I want to achieve. My goal is, when the user hover the <p> I want to show an image above it, this mean I need to use absolute position because I do not want anything to be shifted anywhere else, I just want to show the image above the text.

NOTE: The image has no define height, it could be longer or shorter.

 <div id="wrap" style="position:relative; height: 100px; width: 500px; background: red">
        <img src="img/cat.png" style="position:absolute; ">
        <p style="position:absolute; ">Some text here..</p>
</div>

This is the result I get,

This is my desire result. Note: I DON't want anything to be shifted, I just want to show the image above the text once it is hovered therefore I do not need anything to be shifted anywhere.

Answer 1

Working example: http://jsfiddle.net/Rhcp5/2/

HTML:

<div id="wrap">
        <img src="img/cat.png">
        <p>Some text here..</p>
</div>

CSS:

#wrap {
position:relative; 
height: 100px; 
width: 500px; 
background: red;
}

#wrap img {
display: none;
position: absolute;
bottom: 100%;
margin-bottom: 5px;
}

#wrap:hover img {
display: block;
}

This will handle images of variable height.