CODEWITHSUNDEEP
css
newbieprogrammer
newbieprogrammer

Reputation: 868

hover image with close button in CSS

I am trying to insert a close button on top right of the hover image in CSS. However the image appear in the middle of the hover image. I am unsure of which area i made a mistake.

jsfiddle

these are my css code , also i have insert them to jsfiddle for my demo

body {
    margin: 0;
    padding: 0;
    background: #EEE;

}

#pagecenter {
    background-color: transparent;  
    width: 1200px;  
    min-width: 1200px; 
    height: auto;
    min-height: 100%;
    padding-top: 0px;  
    padding-right: 0px;  
    padding-bottom: 0px;  
    padding-left: 0px;  
    margin-top: 0px;  
    margin-right: auto;  
    margin-bottom: auto;  
    margin-left: auto;  
    position: relative;  
    border-collapse: collapse;
}

.wrap {
    overflow: hidden;
    margin: 50px;
}

/*20 for 5 box , 25 for 4 box*/ 
.box {
    float: left;
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    color: #FFF;


}
/*border width control*/
.boxInner {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
    overflow: hidden;
    background: #66F;

}

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


.gallerycontainer{
    position: relative;
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
}

/*This hover is for small image*/
.thumbnail:hover img{
    cursor:pointer;
    border: 1px solid transparent;
}

/*This hide the image that is in the span*/
.thumbnail span{ 
    position: absolute;
    padding: 5px;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

/*This is for the hidden images, to resize*/
.thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    width:100%; /* you can use % */
    height: auto;
    padding: 2px;
}

/*When mouse over, the hidden image apear*/
.thumbnail:hover span{ 

    position:fixed;
    visibility: visible;
    max-width:600px;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    margin: auto;
    z-index: 200;
}

.close{
    position:absolute;
    right:-10px; 
    top:-10px; 
    display:none;

    z-index:1;
}


.thumbnail:hover span .close{ 
 display:block;
}

Upvotes: 0

Views: 1462

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

you will need to give width and height

JS Fiddle

.thumbnail span .close{
    position:absolute;
    right:-10px; 
    top:-10px; 
    display:none;
    width:30px;
    height:30px;
    z-index:1;
}

Upvotes: 1

Related Questions