hover image with close button in CSS - css

Question

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;
}

Answer 1

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;
}