Tutorial Divi: Aplicando estilos a las imágenes

Publicado por Fernando Tellado el 24 Ene, 2018

Índice de contenidos

1 Añade la clase CSS
2 Añadiendo borde redondeado a la imagen
3 Poniendo la imagen en escala de grises
4 Añadiendo efecto al pasar el cursor

Los módulos de Divi son geniales pero siempre tienen carencias a la hora de dar a nuestros textos o imágenes estilos personales, algo que con un poco de CSS se puede solucionar. Solo hay que perderle el miedo a usar un poquito de código ¿nos animamos?

Añade la clase CSS

Hoy vamos a aplicar estilos chulos a las imágenes. Para ello, por ejemplo, añade un módulo de texto e inserta una imagen a tu elección.

A continuación pásate por la pestaña Avanzado y añade una Clase CSS, que llamaremos imagen-personalizada. Guarda los cambios, sal y publica.

Lo que obtenemos es esto…

Añadiendo borde redondeado a la imagen

Para empezar a perderle el yuyu le pondremos un borde redondeado.

Abre el Personalizador de temas, ve a la sección CSS Adicional y añade lo siguiente:

/* borde redondeado */
    .imagen-personalizada img {
            max-width: 250px;
            border: 5px solid #516CF7;
            border-radius: 150px;}

/* borde redondeado */

.imagen-personalizada img {

max-width: 250px;

border: 5px solid #516CF7;

border-radius: 150px;}

En el código lo que hemos hecho es definir un ancho máximo (max-width) de 250 píxeles, un borde de 5 píxeles en color azul. Y lo que conseguimos es esto:

Bastante chulo ¿eh?

Poniendo la imagen en escala de grises

Otro efecto chulo que puedes aplicar es cambiar la imagen a escala de grises, para lo que modificaríamos nuestro código para dejarlo así:

/* borde redondeado y escala de grises */
    .imagen-personalizada img {
            max-width: 250px;
            border: 5px solid #54544b;
            border-radius: 150px;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);}

/* borde redondeado y escala de grises */

.imagen-personalizada img {

max-width: 250px;

border: 5px solid #54544b;

border-radius: 150px;

-webkit-filter: grayscale(100%);

filter: grayscale(100%);}

Y lo que conseguimos es esto:

Añadiendo efecto al pasar el cursor

Ahora que hemos visto cómo ponerle un borde y cómo hacer que la imagen se vea en escala de grises ¿qué te parecería hacer que la imagen se vea en escala de grises y al pasar el cursor cambiase a verse en color?

Pues fácil, solo hay que combinar ambos estilos antes aplicados y definirle qué estilos aplicar al pasar el cursor (hover), así:

/* borde redondeado, escala de grises y color en hover */
    .imagen-personalizada img {
           max-width: 250px;
            border: 5px solid #54544b;
            border-radius: 150px;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);}
 /* al pasar el cursor la imagen vuelve a verse en color */
    .imagen-personalizada img:hover {
            border: 5px solid #516CF7;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);}

/* borde redondeado, escala de grises y color en hover */

.imagen-personalizada img {

max-width: 250px;

border: 5px solid #54544b;

border-radius: 150px;

-webkit-filter: grayscale(100%);

filter: grayscale(100%);}

/* al pasar el cursor la imagen vuelve a verse en color */

.imagen-personalizada img:hover {

border: 5px solid #516CF7;

-webkit-filter: grayscale(0%);

filter: grayscale(0%);}

Y lo que conseguimos es este bonito efecto:

Ya solo queda acordarte de publicar los cambios en el CSS adicional, que no se te olvide.

¿Quieres aplicar estos estilos a más módulos con imágenes, solo tienes que volver al principio de esta guía y especificar la Clase CSS al módulo para que la utilice también.

A partir de aquí ya tienes el modo de hacerlo, en tus manos está personalizar el truco a tu gusto.