CodePen

HTML

            
              <div class="display-search">
    <div class="black-box">
        &nbsp;
    </div>
    <ul>
        <li>
            <div class="thumb-image">
                &nbsp;
            </div>
        </li>
     </ul>
</div>
            
          
!
via HTML Inspector

CSS

            
              body{margin:0px; padding:0px; font:normal 13px Verdana, Geneva, sans-serif; color:#999;}
ul,li,a,div,p{margin:0px; padding:0px; list-style:none inside; overflow:hidden;}
.display-search{width:632px; margin:0px auto;}
.display-search ul {margin:0px 0px 16px 0px;}

.display-search ul li .thumb-image{width:385px; height:154px; background:#CC0;}

.display-search .black-box{background:#000; opacity:.5; position:fixed; width:100%; height:100%; visibility:hidden;}

.display-search ul li:hover ~ .display-search ul{width:100%; height:100%; position:absolute; background:#000; opacity:.5; visibility:visible;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................