Sabe quando você passa o mouse sobre uma imagem, um calendário e eles mudam de cor ou de opacidade? Isso é feito com ajuda da propriedade hover.

Exemplo

Pra obter uma imagem que muda de aparência quando você passa o mouse sobre elas, adicione o seguinte código ao seu CSS:

Essa primeira parte do código é como a imagem ficaria normalmente.

.blogimage {
background: #000000; 
padding: 9px;
border: 1px solid #f82490;
margin-right: 6px;
margin-left: 6px;
margin-top: 3px;
filter:alpha(opacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0;
-moz-border-radius: 6px 6px 6px 6px;
}

Essa segunda parte do código é como a imagem ficaria quando você passar o mouse sobre ela. Ou seja, ela pode mudar a cor da borda, mudar a opacidade e muitas outras coisas mais.

.blogimage:hover     {
background: #FF0000; 
padding: 9px;
border: 1px solid #f82490;
margin-right: 6px;
margin-left: 6px;
margin-top: 3px;
filter:alpha(opacity=50); 
-moz-opacity: 0.5; 
opacity: 0.5;
-moz-border-radius: 6px 6px 6px 6px;
}

Adicione esses dois códigos no seu CSS e edite as cores de acordo com a sua preferência.

Pra fazer com que a imagem mude quando você passar o mouse sobre elas, agora só adicione a tag class="blogimage" dentro da tag da sua imagem da seguinte forma:

<img src="http://ENDEREÇOAQUI.com/imagem.jpg" class="blogimage" />

Só lembrando que essa propriedade pode ser usada em muitos outros lugares, como calendários, caixas de texto… É só usar a sua criatividade!

Atenção: Esse código funciona em navegadores Mozilla, Opera e Internet Explorer 7.

Ainda tem alguma dúvida? Então pergunte.