andyunleashed
9/10/2012 - 2:55 PM

index.html

@import "compass";
.column {
    @include border-radius(10px); /* just for fun */
    @include transition(box-shadow 1s ease); /* fade back in when un-hovered */
  	&:hover {
			@include transition(box-shadow 1s ease); /* fade in box shadow */
			@include box-shadow(0 0 5000px 5000px rgba(black, 0.9)); /* the magic */
 
		}
    
}
<div class="box" style="width: 1000px; margin: 0 auto;">
  
  <h1 style="text-align: center">Hover one of the columns below!</h1>
  
  <div class="column" style="float: left; width: 30%; margin-right: 3%;">
   <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" style="float: left; width: 30%; margin-right: 3%;">
    <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" style="float: left; width: 30%; margin-right: 3%;">
    <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>