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:
|
1 2 3 4 5 |
/* 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í:
|
1 2 3 4 5 6 7 |
/* 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í:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 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.
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
