用CSS问题叠加图像

我正在尝试在图像上叠加叠加。代码工作不错，但问题是我有另外一个DIV上覆盖的顶部，我想覆盖住，甚至当你将鼠标悬停即div用CSS问题叠加图像

HTML

.overlay { 
 
    position: relative; 
 
} 
 
.overlay img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 
.overlay:after, 
 
.overlay:before { 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
} 
 
.overlay:after { 
 
    content: '\A'; 
 
width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.6); 
 
} 
 
.overlay:hover:after, 
 
.overlay:hover:before { 
 
    opacity: 1; 
 
} 
 
.top-icons { 
 
    position: absolute; 
 
    z-index: 10; 
 
    margin: 5px 0 0 5px; 
 
    width: 100%; 
 
    display: none; 
 
} 
 
.post-img:hover .top-icons { 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="col-box"> 
 
    <div class="post-img"> 
 
     <div class="top-icons"><a href="">Test</a> Some text gose here</div> 
 
     <a href="#"> 
 
     <div class="overlay"> 
 
      <img src="http://placehold.it/300x300"> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    <div class="other"> 
 

 
    </div> 
 
    <!--other--> 
 
    </div> 
 
    <!--col-box--> 
 
</div> 
 
<!--col-lg-3 col-md-4 col-xs-6-->

我想要的覆盖工作，即使当你徘徊在div top-icons

请检查jsfiddle。

来源

2016-05-14 max

加在T以下更改他CSS：

div.post-img:hover .overlay:after, div.post-img:hover .overlay:before { 
    opacity:1; 
}

来源

2016-05-14 16:57:39 mihkov

感谢它的工作。真棒 – max

修改YOUT HTML通过使overlay父的top-icons

.overlay{ 
 
    position: relative; 
 
} 
 
.overlay img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 
.overlay:after, 
 
.overlay:before { 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
} 
 
.overlay:after { 
 
    content: '\A'; 
 
width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.6); 
 
} 
 
.overlay:hover:after, 
 
.overlay:hover:before { 
 
    opacity: 1; 
 
} 
 
.top-icons { 
 
    position: absolute; 
 
    z-index: 10; 
 
    margin: 5px 0 0 5px; 
 
    width: 100%; 
 
    display: none; 
 
} 
 
.post-img:hover .top-icons { 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="col-box"> 
 
     <div class="post-img"> 
 
      <div class="overlay"> 
 
      <div class="top-icons"><a href="">Test</a> Some text gose here</div> 
 
      <a href="#"> 
 
       <img src="http://placehold.it/300x300"> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     <div class="other"> 
 
     </div> 
 
     <!--other--> 
 
     </div> 
 
     <!--col-box--> 
 
    </div> 
 
    <!--col-lg-3 col-md-4 col-xs-6--> 
 
    </div> 
 
</div>

来源

2016-05-14 16:37:21 dippas

如果添加的z-index之前.'overlay ::，.overlay :: after'你不能点击里面的DIV – max

@Max对不起，我忘了，看到更新的答案 – dippas

链接+ 1这项工作，但即时通讯标记@mihkov答案是正确的，因为如果我改变HTML我可以有一个覆盖的链接。因为不允许在另一个链接中有链接。但是，谢谢。你真棒。 – max

在CSS规则 .overlay:hover:after, .overlay:hover:before

只是.post-img:hover .overlay:after, .post-img:hover .overlay:before

来源

2016-05-14 16:43:19 steppefox

没有工作 – max

用CSS问题叠加图像

回答

相关问题