如何在悬停时使用网格设计将叠加div放在另一个div上？

Question

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

On hover with overlay

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 . 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?

Answer 1

Changed a few things with the positions and also gave a height to the li element cause the img was bigger..

http://jsfiddle.net/4CqNK/8/

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

}
.overlay{
 width:100%;
 height:100%;
display:none;
    position:absolute;
    top:0px;
    left:0px;
}
.overlay div {
    position:relative;
    display:inline-block;
    top:50%;
    margin:-50% 5px 0 0;
}
ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;
}
.bt1 {
    background-color:orange;
    width:50px;
    height:50px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}

Answer 2

Here's another solution where i've used only 1 div but you can use several other div's with the same class. FIDDLE

Answer 3

You first have to be sure that your .image and .overlay classes are displayed at the same place. So here you should add a position:relative in ul li and add an absolute:position to both classes.

Once you have that, it is easier to place your elements: ( jsfiddle )

.image{
    position:absolute;
    left:0;
    top:0;
 width:150px;
 height:150px;

}
.overlay{
    position:absolute;
    left:0;
    top:0;
 width:150px;
 height:150px;
 display:none; 
}

ul { list-style: none; width: 100%; }
ul li { 
    display:inline-block; 
    width:160px; 
    position:relative;
}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;

}
.bt1 {
    background-color:orange;
    position:absolute;
    width:50px;
    height:50px;
    left:5%; <-- you may have to play with those values if you want to place them somewhere else
    top:30%; <--  same as above
}
.bt2 {
    background-color:green;
    position:absolute;
    width:50px;
    height:50px;
    right:5%;
    top:30%;
}

Answer 4

You can use CSS code below for image:

position:absolute;
z-index:-1;

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

My solution: http://jsfiddle.net/xAkJG/1/

Answer 5

Came across this Question and created my own, flexbox based , solution. It centers the buttons more nicely!

http://cssdeck.com/labs/83bhrs3v

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

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

    </li>       
</ul>

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

.overlay{
    width:100%;
    height:100%;
    display:none;
    position:absolute;
    top:0px;
    left:0px;

    background-color:black;
    opacity:0.75;    
}

.overlay > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}

ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}

li:hover .overlay {
    display:block;
}

.bt1 {
    background-color:orange;
    width:80px;
    height:80px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}