CODEWITHSUNDEEP
htmlcss
Wanting to learn
Wanting to learn

Reputation: 468

Trying to keep image contained within another image

I am using jQuery to change the size of a image after a click. How can I keep a close button contained within the upper right corner no matter what the size of the image becomes after the 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 is I can keep the image contained within #full_image but I need it contained within #full_image img

Upvotes: 1

Views: 85

Answers (2)

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7522

Check this Fiddle. Is this is waht you want?

I've created a DIV with full_image ID and set the image as a background.
Then I've added the close button into the DIV and position-ed them both.
So the close button will be always at the top-right corner of the image despite the image size.

Upvotes: 0

Stano
Stano

Reputation: 8949

Try this 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/

Upvotes: 1

Related Questions