I tried to make a grid like design, I want to show a overlay on hover to each div.

The overlay div has two button which should be placed in center.

i tried the below code i believe the logic is correct but the position of the button and overlay are not placing at the center of the image div.

**Image Without overlay**

![Image Without overlay](https://i.stack.imgur.com/uUOuJ.jpg)

**On hover with overlay**

![On hover with overlay](https://i.stack.imgur.com/G3B0l.jpg)

**Html** 

```
<ul>
    <li>
        <div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
        <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
         <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
         <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
        <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>

</ul>

```

**CSS**

```
.image{
 width:100px;
 height:100px;

}
.overlay{
 width:100px;
 height:100px;
 display:none; 
}

ul { list-style: none; width: 100%; }
ul li { display:inline-block; width:150px;}
.image:hover +.overlay {
    display:block;
    background-color:black;
    top:0;
    opacity:0.75;

}
.bt1 {
    background-color:orange;
    position:absolute;
    width:50px;
    height:50px;
    margin:0 0 0 5%;
}
.bt2 {
    background-color:green;
    position:absolute;
    width:50px;
    height:50px;
    margin:0 5% 0 0;
}

```

[JSfiddle](http://jsfiddle.net/4CqNK/5/) . Image size are changeable so fixed padding to center button may won't help here i think. Can anyone help me on positioning the overlay?