Geek Answers Handbook

How to place an overlay div on another div on a hover with a grid like design?

I tried to create a grid similar to the design, I want to show a hover overlay for each div.

The overlay div has two buttons that should be placed in the center.

I tried the code below. I believe that the logic is correct, but the position of the button and overlay does not fit in the center of the image.

No overlay image

Image Without overlay

Hover 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 is variable, so a fixed pad to the center button may not help here, I think. Can someone help me with the placement of the overlay?

+4
source share
5

, li, img .

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

, 1 div, div's . FIDDLE

+3

, .image .overlay . , position:relative ul li absolute:position .

: (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%;
}
+1

CSS :

position:absolute;
z-index:-1;

z-index .

.

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

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

0
source

I went through this question and created my own, flexbox solution . It centers the buttons more beautifully!

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

More articles:


All Articles