title: How to place a overlay div on another div on hover with grid like design?
body: <p>I tried to make a grid like design, I want to show a overlay on hover to each div.</p>
  
  <p>The overlay div has two button which should be placed in center.</p>
  
  <p>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.</p>
  
  <p><strong>Image Without overlay</strong></p>
  
  <p><img src="https://i.stack.imgur.com/uUOuJ.jpg" alt="Image Without overlay"></p>
  
  <p><strong>On hover with overlay</strong></p>
  
  <p><img src="https://i.stack.imgur.com/G3B0l.jpg" alt="On hover with overlay"></p>
  
  <p><strong>Html</strong> </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;div class="image"&gt;&lt;img src="http://i.stack.imgur.com/rOVDt.jpg"/&gt;&lt;/div&gt;
          &lt;div class="overlay"&gt;&lt;div class="bt1"&gt;&lt;/div&gt;&lt;div class="bt2"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
  &lt;div class="image"&gt;&lt;img src="http://i.stack.imgur.com/rOVDt.jpg"/&gt;&lt;/div&gt;
           &lt;div class="overlay"&gt;&lt;div class="bt1"&gt;&lt;/div&gt;&lt;div class="bt2"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
  &lt;div class="image"&gt;&lt;img src="http://i.stack.imgur.com/rOVDt.jpg"/&gt;&lt;/div&gt;
           &lt;div class="overlay"&gt;&lt;div class="bt1"&gt;&lt;/div&gt;&lt;div class="bt2"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
  &lt;div class="image"&gt;&lt;img src="http://i.stack.imgur.com/rOVDt.jpg"/&gt;&lt;/div&gt;
          &lt;div class="overlay"&gt;&lt;div class="bt1"&gt;&lt;/div&gt;&lt;div class="bt2"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/4CqNK/5/" rel="nofollow noreferrer">JSfiddle</a> . 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?</p>