用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問題疊加圖像

回答

相關問題