Jquery, Open div inside its parent limits

Question

I have a responsive image that contains some tickets , and I want that the tickets don't accross its container limits when opened i can't describe well the problem but this is the example http://jsfiddle.net/tnYjP/

<div class="container">
 <img src=""/>
   <div class="some" style="top:80%;left:80%">
    <span>Title</span>
    <p style="display:none;">Description
        Description
        DescriptionDescription</p>
    </div>    
</div>

And the jquery script is:

    $('.some').hover(function(){
        var description = $(this).find('p');
        description.show('slow');

    }, function(){
        var container = $(this);
        var description = container.find('p'); 

        description.hide("slow");
    });

Thanks

Answer 1

If I understand your question correctly (which can easily not be the case), you want to open the description within the giant TEST container. To do this, you need to set the position elements of the item to be based on bottom and right :

.some{
    z-index: 4;
    position: absolute;
    bottom:10%;
    right:10%;
    background-color: rgba(12, 12, 12, 0.6);
}

Here is an updated jsFiddle

I also took the liberty of moving your inline styles to CSS, and updating your .hover() function to be the more effective .on() .