Bildüberlagerung mit CSS-Ausgabe

Question

Ich versuche, ein Bild auf ein Overlay zu legen. Code Arbeit in Ordnung, aber das Problem ist, ich ein anderes div auf der Oberseite der Auflage haben, und ich möchte, dass die Overlay bleiben, auch wenn Sie schweben dass div

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

ich will Overlay zu arbeiten, selbst wenn Sie auf div schweben top-icons

Bitte überprüfen Sie die jsfiddle.

Answer 1

Add in t folgenden er CSS:

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

Answer 2

yout html ändern, indem overlay Elternteil der 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>

Answer 3

In der CSS-Regel .overlay:hover:after, .overlay:hover:before

es nur ändern mit .post-img:hover .overlay:after, .post-img:hover .overlay:before