A nice shadow transition for boxes/blocks in a grid

_box-shadow.scss

//Use <div class="box box-shadow"> for a nice hover effect.
//@requires our _media-queries.scss
//Available classes <div class="box box-rounded box-border box-rounded box-shadow">

.box {
    background-color: #fff;
    overflow: hidden;	
	
	&.box-no-padding {
		padding: 0;  
	}	
	
	&.box-rounded {
		border-radius: 4px;    
	}
	
	&.box-border {
		border: 1px solid #eaeaea;  
	}	
	
}

.box-shadow {
		transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		
		-webkit-transition: 0.3s;
		transition: 0.3s;
    	
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
		&:hover {			
			-webkit-transform: translateY(-4px);
    			transform: translateY(-4px);
			
			//Add shadow effect for viewports 1024px and above
			@include MQ(L) {
				box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
    				-webkit-box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
			}
		}
}