Making A Close Image Appear On Top Right Corner Of A DIV

Question

I wanted to know how to make a small cross (close) image appear on the top right inside of a div. Using CSS and XHTML. Thanks

Solution 1

You could do it this way: jsfiddle.net/7JEAZ/1317

Code snippet:

#panel{
    width:100px;
    height:100px;
    background:red;
}
#close{
    display:block;
    float:right;
    width:30px;
    height:29px;
    background:url(https://web.archive.org/web/20110126035650/http://digitalsbykobke.com/images/close.png) no-repeat center center;
}

<div id="panel"><a id="close" href="#"></a></div>

Solution 2

In-case its any help, here is another example with the close button over the top right corner of the DIV, the code is an example showing it with two different sized div's and the jQuery to close the parent div of the image clicked. There is also a link to reshow the div.

CSS:

#content{
    border: solid black;   
    width: 70%;
}

#info{
    border: solid red;   
    width: 50%;
}

.close-image{
    display: block;
    float:right;
    position:relative;
    top:-10px;
    right: -10px;
    height: 20px;
}

HTML:

<a href="#" id="toggle-content">Show / Hide content</a>
<br/><br/>
<div id="content">
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
    <b><u>Content:</u></b><br/>
    This is the info inside the div!
</div>
<br/><br/>
<div id="info">
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
    <b><u>Info:</u></b><br/>
    Click the close button to hide this info!
</div>

jQuery:

$(".close-image").click(function() {
    $(this).parent().hide();
});

$("#toggle-content").click(function() {
    $("#content").slideToggle();
});

An example: click here

Solution 3

this simple example may help. =]

HTML

<div class="thumbnail">
    <img src="http://96pix.com/images/renee-v.jpg" />
    <a href="#" id="close"></a>
</div>

CSS

.thumbnail {
    position: relative;
   width:300px;
   height:300px;
}

.thumbnail img {
    width:100%;
    height:100%;
}

#close {
    display: block;
    position: absolute;
    width:30px;
    height:30px;
    top: 2px;
    right: 2px;
    background: url(http://icons.iconarchive.com/icons/kyo-tux/delikate/512/Close-icon.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Example: http://jsfiddle.net/PPN7Q/26/

Comments

[Hirvesh]

that's it. Thanks for that! :)