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.