Nerd herd Trucos: Efecto Hover en las imágenes

El efecto hover cambia el aspecto de un elemento cuando se sitúa el puntero sin que sea seleccionado y vuelve a su estado original cuando se retira el puntero.
La diferencia está que para añadir los estilos a las imágenes de los post lo hacemos en:

.post img {

......

......

......

}
Si deseamos añadir un borde a las imágenes añadimos antes de ]]></b:skin>


.border img{

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-khtml-border-radius: 5px;

padding: 5px;

background: #ffffff;

border-top: 1px solid #969696;

border-left: 1px solid #969696;

-moz-box-shadow: 2px 2px 4px #696969;

-webkit-box-shadow:2px 2px 4px #696969;

box-shadow:2px 2px 4px #696969;

}

Y en una entrada o gadget de html añadimos:

<div class="border"><img src="url-imagen"/></div>

Si además de los estilos para el borde añadimos unos estilos para el efecto hover la misma imagen al pasar el puntero mostraría los nuevos estilos.

.hover img:hover {

padding: 5px;

background:#ffffff;

border-top: 1px solid #475E0B;

border-left: 1px solid #475E0B;

-moz-box-shadow: 2px 2px 4px #9C192A;

-webkit-box-shadow:2px 2px 4px #9C192A;

box-shadow:2px 2px 4px #9C192A;

}

Gracias a Gem@ por este tuto. La imágen quedaria como el contador de city of fallen angels