Transitions


Ease

.foo {
	background-color: rgba(255, 255, 255, .8);
	-webkit-transition:background-color .8s linear;
	-moz-transition:background-color .8s linear;  
	-o-transition:background-color .8s linear;  
	transition:background-color .8s linear;
}
foo:hover { 
	background-color: rgba(0, 0, 0, .5);    
}
 

Scale

.foo img { 
	margin: 1em 1em;
	padding: 10px;
	border: solid 1px #666;
	-webkit-transition: -webkit-transform 0.2s ease-in-out; 
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out; 
	transition: transform 0.2s ease-in-out;
}
.foo img:hover { 
	-webkit-transform: scale(2.5); 
	-moz-transform: scale(2.5); 
	-o-transform: scale(2.5); 
	transform: scale(2.5); 
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); 
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

Careful

Not many browsers support transitions, so stick with simple effects.