Efeito image hover simplificado

lá pesoal, sei que ja existe um post aqui no blog inclusive do nosso saudoso amigo Gama mas fiz esse post para esclarecer quaisquer duvida que possa ter ficado.
Para criar um efeito hover em imagens ao contrario que todo mundo pensa não é nescessário que este seja um link, embora seja mais simples e útil se for.
Eu particularmente gosto de usar uma unica imagem para criar este efeito usando a propriedade 'background-position' do css combinado com o a:hover que irá dizer a pagina o que fazer quando passamos o mouse sobre o link.


Embora existem pessoas que usem duas imagens, que tambem funcionaria, usando esta tecnica a imagem será carregada no momento que o mouse é passado sobre ela, podendo fazer com que o link fique invisivel enquanto o computador carrega a nova imagem do link.
Outro problema em se usar imagens transitorias em links e o problema do tamanho, ja que um link não pode ter tamanho nem largura especificados em pixels como as imagens, muita gente coloca o texto geralmente um espaco dentro de uma etiqueta mas o span tambem não suporta tamanho e largura em pixels.
Dae você deve estar se perguntando: "Então como irei colocar minha bela imagem em um link?"
Simples, vamos considerar um dos dois casos:
1)Queremos apenas um fundo no link simulando um botão ou algo semelhante.
2)Queremos um fundo que muda de cor quando passamos o mouse em cima.
Ja deu pra ter uma ideia de como teoricamente funciona o nosso link com imagem transitoria, mas como sempre um exemplo prático vai tornar tudo mais gostoso.
Caso 1 queremos simular um botão em um determinado link:
Vamos usar nessee turorial o exemplo com duas imagens para fins de simplicidade.
coloquem a seguinte peça de codigo na folha de estilos de sua pagina:

.botao a {  
background: #666 url('botao_link.gif') no-repeat center center;
width:120px;  
height:24px; 
display:block; 
 }

.botao a:hover { 
background: #666 url('botao_hover.gif') no-repeat 
center center;
color:#999;
               }

agora em cada link, coloque a classe

<p class="botao">
<a href="#" title="Meu Link">Botão CSS</a>
</p>

resultado:

         Botão CSS

no segundo caso é a mesma coisa, a unica diferença e que desta vez o css vai mudar o fundo de uma div onde você poderá colocar altura e largura

<div class="botao">
<a href="#" title="Meu Link">Botão CSS</a>
</div>

Até a proxima!