Efecto hover en bordes

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.

Para el ejemplo he añadido los estilos de borde que tengo en las imágenes de mis entradas, de esa forma respondo al mismo tiempo a los que me preguntaron por ese detalle.

La diferencia está que para añadir los estilos a las imágenes de los post lo hacemos en:

.post img {
......
......
......
}

Nota: Pero no es muy recomendable ya que aveces puede descuadrar sus publicaciones antiguas.

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>

La imagen se vería de esta forma.



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;
}



Fuente: gemablog

0 comentarios:

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika