Databases
StackOverflow2013
Postsdbo
POHow to place a overlay div on another div on hover with grid like design?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to place a overlay div on another div on hover with grid like design?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload