Mochi Productions

Mochi Productions Site

Hover over or click on sections of code to see annotations!

.social-media { list-style:none; } .social-media li { display:inline-block; } .social-media li a { display:inline-block; background:url("../images/social-media.png") no-repeat; width:59px; height:59px; text-indent:-9999px; } This CSS was used to style the social media buttons, which rely upon an image sprite to display the images and their hover states.
#facebook { background-position:0px 0px; } #facebook:hover { background-position:0px -59px; } #twitter { background-position:-59px 0px; } #twitter:hover { background-position:-59px -59px; } #youtube { background-position:-118px 0px; } #youtube:hover { background-position:-118px -59px; } #vimeo { background-position:-177px 0px; } #vimeo:hover { background-position:-177px -59px; } #pinterest { background-position:-236px 0px; } #pinterest:hover { background-position:-236px -59px; } This CSS positions the background image for each social media button in accordance with the positioning of the respective button and its hover state in the image sprite.