Question

我尝试制作网格设计，我想在悬停到每个div时显示叠加层。

叠加div有两个按钮，应放在中间位置。

我尝试了下面的代码我相信逻辑是正确的但按钮和叠加的位置不是放在图像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。图像大小是可以改变的，所以我认为固定填充到中心按钮可能无济于事。任何人都可以帮我定位叠加层吗？

Answer 1

用位置改变了一些东西，并给了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;
}

Answer 2

这是另一种解决方案，我只使用了1 div，但你可以使用同一个类的其他几个div's。 FIDDLE

Answer 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%;
}

Answer 4

您可以在下面使用CSS代码获取图片：

position:absolute;
z-index:-1;

z-index属性指定元素的堆栈顺序。

堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

我的解决方案：http://jsfiddle.net/xAkJG/1/

Answer 5

遇到了这个问题并创建了我自己的基于flexbox的解决方案。它使按钮更加美观！

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

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

5 个答案: