Image overlay with css issue

Question

I'm trying put a overlay on a image. code work fine but the issue is I have another div on top of the overlay and I want the overlay to stay even when you hover that 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--> 

I want the overlay to work even when you hover on div top-icons

Please check the jsfiddle .

Answer 1

Add following in the css:

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

Answer 2

modify yout html by making overlay parent of the 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 the CSS rule .overlay:hover:after, .overlay:hover:before

just change it with .post-img:hover .overlay:after, .post-img:hover .overlay:before