First off, the only reason it needs an <a></a>tag is because it won't work properly with IE otherwise.
You define a new class, in this case <div class="cosmic"> with the following CSS:

.cosmic a{
	display: block;
	width: 200px;
	height: 50px;
	background: url('http://my-rad-image.png') no-repeat;
}

.cosmic a:hover{
     background-position: -200px 0;
}

So you see, our hover image is actually a background image which is twice as big as it appears to be, but because we're telling it to display as a "block" of a specific size, it hides everything outside that block.