Las imágenes de las entradas se prestan a ser mostradas con distintos estilos, unas veces eliminamos un borde que no es de nuestro agrado, otras preferimos cambiarlo porque vimos otro que nos gustó y la mayoría de veces porque nos cansa ver siempre el mismo.
En las plantillas de Blogger los estilos de las imágenes en las entradas los encontraremos de la siguiente forma:.post img {
padding:4px;
border:1px solid $bordercolor;
}
también podemos encontrarlo así:
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
Cualquiera de ellos es el lugar que nos permitirá darle un aspecto distinto a las imágenes.
Hace un tiempo vimos como añadir distintos tipos de borde, también añadimos efecto hover al borde.
El efecto hover nos permite cambiar de aspecto un elemento cuando situamos el puntero sobre el elemento en este caso será sobre imágenes, para conseguir dicho efecto necesitamos añadir unas propiedades al evento hover y vamos a añadir la propiedad opacity.
Buscamos en plantilla edición de HTML los estilos para las imágenes de las entradas, añadimos la propiedad opacity marcada en negrita.
.post img {
opacity:0.6;
}
Justo después añadimos la misma propiedad para el efecto hover con la diferencia que la opacidad será de menor intensidad.
.post img:hover{
opacity: 1;
}
Personalmente esta propiedad me gusta más cuando el blog tiene fondo oscuro, así que vamos a añadir un fondo oscuro para el ejemplo y vemos el resultado.
 |
Si queremos dejar algún borde que tenemos añadido no será problema, combinamos borde con efecto hover.
|
.post img {
background:#333;
border:1px solid #333;
padding:4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #fff;
-webkit-box-shadow:0px 0px 5px #fff;
box-shadow:0px 0px 5px #fff;
opacity:0.6;
}
.post img:hover{
opacity: 1;
}
Para conocer las propiedades que añadimos border-radius y box-shadow.
Si queremos añadir un borde distinto al establecido en los post.
No hay comentarios:
Publicar un comentario