Fondo/Borde en imágenes con CSS

Como lo prometido es deuda, hoy toca contestar (por fin jeje) el comentario de Laura realizado en este blog.

Como habéis podido comprobar en el anterior enlace al comentario, lo que pide es cómo agregar un borde (aunque realmente es un fondo) a la imagen y que éste cambie de color al pasar el puntero del ratón por encima de ella. Destacar también que son a las imágenes que están insertadas en los posts, es decir, que a las imágenes que están insertadas en las barras laterales no aplicaremos este efecto.

Esto lo podríamos realizar de varias formas, pero tal vez la más sencilla sea utilizando CSS.

En primer lugar como siempre indico en estos casos, antes de realizar cualquier cambio es más que conveniente hacer una copia de seguridad de la plantilla del blog por si el resultado no es el esperado o hay algún problemilla.

Antes de empezar, destacar que no hace falta agregar a las imágenes el borde inicial con Photoshop o similar, éste lo agregaremos también con CSS.

Una vez realizada esta copia, accedemos a la opción Plantilla –> Edición de HTML.

Le damos al botón Continuar cuando aparece el mensaje “Si editas directamente el código HTML, esto puede afectar al funcionamiento de algunas funciones …” , buscamos el código .post img y el código que aparece entre llaves lo cambiamos por el siguiente:

padding:10px;
background: rgb(255, 255, 255);
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;

Seguido de esto, insertamos el código para que el borde de la imagen cambie al situar el puntero por encima de ella.

.post img:hover{
padding:10px;
background: rgb(214, 118, 200);
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
}

Guardamos la plantilla y comprobamos que el resultado es el esperado, las imágenes que teníamos insertadas en los posts aparecen con un borde, en este caso, blanco y cuando situamos el puntero del ratón por encima de ellas cambia de color, en este caso, rosa; y por el contrario, las imágenes que teníamos insertadas en las barras laterales conservan su apariencia anterior, no han sufrido ningún cambio.

Realmente lo que estamos agregando con este código es un fondo a la imagen, lo único que al tener fondo la imagen da la impresión que hemos agregado un borde.

Para terminar os explico un poco el código para que podáis realizar las modificaciones que queráis, aunque es bastante sencillo.

• padding: indica la distancia que va a sobresalir el fondo del contorno de la imagen, aparentemente será el tamaño del borde.
• background: el color de fondo/borde de la imagen.
• -xxx-border-radius: su misión es crear las esquinas redondeadas para los diferentes navegadores web (ms – Internet explorer 8 / moz – Mozilla Firefox / webkit – Webkit y Safari / khtml – Konqueror).

Descarga el código explicado en Fondo/Borde en imágenes con CSS