CodePen

HTML

            
              <div class="container">
  <h1>A mask on everything except the hovered column</h1>
<div class="column">
        <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod.</p>
    </div>
    <div class="column">
        <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla.</p>
      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod.</p>
    </div>
    <div class="column last">
      <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla.</p>
      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod.</p>
    </div>  
  <div class="mask"></div>  

</div>
​
            
          
!
via HTML Inspector

CSS

            
              * {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ccc;  
}

.container {
  width: 800px;
  margin: 0 auto;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

h1 {
  font-size: 2em;
  text-align: center;
  padding: 10px;
}

.column {
  width: 31%;
  float: left;
  padding: 10px;
  margin: 0 1%;
  background: #fff;
  z-index: 1;
  cursor: pointer;
  position: relative;
  border-radius: 3px;
}

.column:not(.last):after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  width: 6.5%;
}

.column:last-of-type {
  margin-right: 0;
}

.mask {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  z-index: 2;
}

.column:hover ~ .mask {
  display: block;
}

.column:hover {
  z-index: 3;
  box-shadow: 0 0 10px white;
}
​
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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