Oferta SiteGround Black Friday

Tutorial Divi: Aplicando estilos a las imágenes

Los módulos de 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;}

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

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

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.

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 5

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

2 comentarios en “Tutorial Divi: Aplicando estilos a las imágenes”

  1. Luis Salamanca

    Muy buen truco Fernando. Gracias por compartir.

    Te pregunto: sabes como lograr el efecto que se da en las imágenes de portafolio en este enlace http://aonetheme.com/preview/, es decir que la imagen se desplace verticalmente al pasar el cursor (desconozco como se llama el efecto), o bien, conoces algún plugin?

    Mil gracias por la ayuda. Un saludo

  2. Doce Más Una

    Buenos días D. Fernando. He encontrado mucha ayuda en su web y en especial en este artículo, muchísimas gracias.
    Sería posible añadir un enlace a la imagen, para al hacer click nos dirija a otra página?
    Gracias de antemano.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba