CodePen

HTML

            
              <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>
            
          
!
via HTML Inspector

CSS

            
              * {  
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;      
          box-sizing: border-box;
}
body { background: #efefef; }
.column {
  padding: 10px;
  background: #fff;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
      -ms-border-radius: 2px;
       -o-border-radius: 2px;
          border-radius: 2px;
  /* just for fun */
  -webkit-transition: box-shadow 0.5s ease;
     -moz-transition: box-shadow 0.5s ease;
       -o-transition: box-shadow 0.5s ease;
          transition: box-shadow 0.5s ease;
  /* fade back in when un-hovered */
}
.column:hover {
  -webkit-transition: box-shadow 0.5s ease;
     -moz-transition: box-shadow 0.5s ease;
       -o-transition: box-shadow 0.5s ease;
          transition: box-shadow 0.5s ease;
  /* fade in box shadow */
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  /* the magic */
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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