Five Useful Interactive CSS/jQuery Techniques Deconstructed - Practical JavaScript Techniques - page 43

.hover-panel:hover p {
color : # FFF :
}
Finally, let's add a background image that pops into place on hover:
.hover-panel {
background-image : url(hover-panel-icon.png) ;
background-position : 292px 10px ;
background-repeat : no-repeat ;
}
.hover-panel:hover {
background-position : 180px 10px ;
}
Here, we've added a few important styles to accomplish the hover effect. First, we've attached
the background image to our .hover-panel . This is normally positioned outside of the button,
but on mouseover, it is placed correctly. Also, note that we've placed it off to the right side of
the panel, so that when we apply the transition animation, the icon will slide in from the right.
ANIMATING THE TRANSITION
Finally, let's add the transition:
.hover-panel {
-moz-transition : all 0.2s ease ; /* FF3.7+ */
-o-transition : all 0.2s ease ; /* Opera 10.5 */
-webkit-transition : all 0.2s ease ; /* Saf3.2+, Chrome */
transition : all 0.2s ease ;
}
The transition effect triggers the animation of the background image. Because we've flagged it
to apply to all attributes, the transition will also be applied to the background-color change
that we applied above.