CSS only Logo rollover

How to make an "interactive logo" CSS (rollover) ?

Open your image editor and create your logo image something like:
*I have used a transparent background, in this case I added background image for visibility reasons, as logo is transparent.

The CSS code that makes this work is:

<style type="text/css">
#logo2 {width:300px;margin:0 auto;text-align:center;}
#logo2 a {
outline: none;/* get rid of dotted borders in FireFox */
 text-indent: -5000px ;/* this moves the text outside of the screen area */
		display:block;
		width:295px;
        height:115px;
		background: transparent url("images/articles/logo_v2.png") 0 0 no-repeat;
		text-decoration: none;
		}
	#logo2 a:hover {
		background-position: 0 -115px;
		}

</style>

HTML:

<div id="logo2"><a href="#nogo" title="Vision.To Design">Vision.To Design</a></div>

Live Demo:

This technique is same as Single image CSS rollover but this time background position "moves" vertically.

Related Pages