html - Trying to keep image contained within another image -

i using jquery change size of image after click. how can keep close button contained within upper right corner no matter size of image becomes after click. jsfiddle

my css

#full_image { width: 0px; height: 0px; left: 0px; position: relative; opacity: 1; z-index: 9; }  #full_image img {  background: url("zoom-on.png") no-repeat; background-position: 5px 5px; left: 0px; width: 339px; height: 211px; position: relative; overflow: hidden; }  #full_image .full_close{ background: url("zoom-on.png") no-repeat; top: 10px;      cursor: pointer;  height: 29px; opacity: 1; position: absolute;     width: 29px; z-index: 999; right: 0px; } 

my html

<div id="full_image"><img src=""/> <span> <a href="#" class="full_close"></a></span> </div> 

the thing can keep image contained within #full_image need contained within #full_image img

try css:

#full_image {     position: relative;     display:inline-block;     *display:inline; zoom:1; /* ie7 fix */     z-index:1; } #full_image span {     background:url("zoom-on.png") no-repeat;     top: 10px;     right: 0px;     width: 32px;     height: 32px;     display:none;     cursor: pointer;     position: absolute;     z-index:2; } #full_image:hover span {     display:block; } 

and html

<div id="full_image">     <img src="image.jpg" /> <a href="#" class="full_close" title="close"><span> </span></a> </div> 

http://jsfiddle.net/r9ldp/4/