Me preguntaba Toni´s la forma de añadir efecto hover en el borde de una imagen.
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 {
......
......
......
}
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;
}
Ver ejemplo 1
ESTILOS [+/-]
Ver ejemplo 2
ESTILOS [+/-]
Ver ejemplo 3
ESTILOS [+/-]
0 comentarios:
Publicar un comentario