Rollover com CSS e utilizando imagens

Vamos mostrar um pequeno truque para criar um efeito de rollover com imagens, porém usando um simples CSS, sem a necessidade de nenhuma outra tecnologia ou linguagem de programação. O rollover (iluminação ou mudança de cor ao passar o mouse por cima) é um feito muito simples, porém, pode dar idéias para dar maior dinamismo ao nosso  site , sem que isto afete a complexidade do código.

Ademais, de passo, vamos responder uma pergunta habitual: como fazer para que os links ocupem todo o espaço da célula ou camada onde estão situados? Ou dito de outra forma: como fazer para que o link se mostre com todo o espaço disponível dentro do container no que está?

O que desejamos é que o lugar onde colocamos o link se comporte como o próprio link, assim, ao passar o mouse pelo container onde estiver situado o link (não necessariamente sobre o texto do link), se realize o efeito de iluminação.
Vale a pena prestar atenção a que o link muda de cor ao passar o mouse encima, porém, não faz falta se situar sobre o texto do link para que mude, e sim que serve ao posiciona-lo sobre a camada onde foi colocado o link.