CSS de transparencia de imagenes. ¿Es posible?
-
Hola, buenas tardes gente hermosa y genial. Me preguntaba si sería posible hacer que mediante CSS, al pasar el cursor por encima de una imagen, esta se volviera ligeramente más blanca (transparente, solo que vista blanca al ser el fondo de color blanco).
¿Sería eso posible? En el caso de ser posible, ¿cómo podría hacerlo? Muchísimas gracias, y un abrazo enorme y un besito en la nariz.
El blog con el que necesito ayuda es (visible solo para usuarios conectados).
-
¡Hola!
Suponiendo que solo lo quisieras en la página principal, yo utilizaría un código como este:
/* Añade una transparencia blanca al hacer hover | AG */ .home .blog-image { background: #fff; } .home .blog-image img:hover { opacity: 0.6; }Puedes jugar un poco con los valores, si quieres que sea más o menos blanco :)
¡Un saludo!
-
Mmm no funcionó, ¿estaré haciendo algo mal? Lo estoy colocando en el apartado de CSS de personalizar.
la web es esta : http://lomejorparatugato.com/
no la que indica mi primer post
Gracias~ -
Ah, es que el CSS dependerá del tema que utilizas por lo que no será el mismo para el otro sitio que nos indicas.
¿Tu idea es que esto pase con cualquier imagen en tu sitio o tienes algo más concreto en mente?Contactanos directamente a través de https://wordpress.com/help/contact y cuéntanos más detalles.
¡Un saludo!
-
Hola, muchas gracias por responderme. Pues la idea en principio era colocar ese efecto en el inicio de la pagina web, donde figuran las razas, pero también en otras paginas, y como pensé que seria muy complicado escoger en que paginas utilizarlo, creo que seria mejor simplemente que el efecto funcionara con todas las imágenes de la web y ya esta, simplemente dándole una transparencia no muy intensa para que no sea demasiado molesto que todas las imágenes lo tengan.
Pero no se muy bien si seria posible, ni tampoco se los limites que puede tener el tema que utilizo. La verdad es que no sabia que algunos temas no respondían ante determinadas opciones CSS -
La verdad es que no sabia que algunos temas no respondían ante determinadas opciones CSS
Cada tema tiene su propio código, así que, para modificarlo, también habrán diferencias. El código CSS será el mismo, pero lo elementos a tener en cuanta ya no :).
Puedes utilizar este código para crear el efecto de transparencia en las imagenes en tu página principal:
/* Blog Posts block image hover on homepage | forum (KK) */ .wp-block-newspack-blocks-homepage-articles .post-thumbnail:hover { opacity: 0.6; }El número (0.6), lo puedes modificar para conseguir el look que buscas.
Espero haber ayudado :)
¡Un saludo!
-
-
No funciona… :< Siento haber tardado en responder. Lo probé y no funcionaba.
Otra duda que tengo, ¿Es posible colocar CSS en distintas páginas? En plan, un código CSS por cada página en lugar de un único CSS general.
Gracias! <3 -
Debería de funcionar, cuando hago pruebas en tu sitio va bien, mira:
¿Has guardado los cambios después de añadir el código?
Es posible colocar CSS en distintas páginas
Es posible añadir código que afecta solo ciertas páginas o entradas, sí.
Pero ten en cuenta que nuestro soporte aquí tiene sus limitaciones:https://wordpress.com/support/custom-design/css-support/.
Te invito a que nos contactes directamente a través de https://wordpress.com/help/contact si necesitás más ayuda.
-
Ohh okay. Es que por ejemplo me gustaría añadir ese efecto en esta página https://lomejorparatugato.com/tienda-2/ y aparte en otra que tiene distintos artículos donde voy escribiendo curiosidades sobre gatos y salen como las imágenes llevando a cada artículo.
¿Eso se podría? Perdona que moleste tanto, no sé mucho y estoy intentando entender cómo va todo, muchíiiiisimas gracias por tu tiempo.
-
Mira, este código te dará ese efecto de transparencia para todas las imagenes añadidas desde Bloque de imágen:
/*Image Block transparency on hover*/ .wp-block-image:hover { opacity: 0.6; }Puedes cambiar el número para tener más (0) o menos (1) transparencia.
-
Vale, eso me vino bien, solo veré cómo arreglarlo de modo que no me afecte a otras imágenes, ya veré cómo hacerlo. ¡Muchas gracias <3!
Última pregunta rápida aunque no sé si debería hacerlo en otro tema:
¿Puedo añadir cómo una especie de marco en el diseño general de la web? Para que no quede todo puro blanco, sino que haya como una especie de marco entre lo blanco y el interior de la web. No sé si me explico. Si es mejor que haga otro tema aparte dímelo. Muchas gracias por todo y por tu tiempo <3 -
¿Puedo añadir cómo una especie de marco en el diseño general de la web? Para que no quede todo puro blanco, sino que haya como una especie de marco entre lo blanco y el interior de la web.
Sí, podrías hacerlo también con CSS pero con eso ya, me temo, no podremos ayudarte.
Le puedes echar un ojo a los recursos que enlazamos aquí:https://wordpress.com/es/support/diseno-personalizado/css-personalizado/#ayuda-con-css.
Si necesitas ayuda de un diseñador, puedes considerar contratar a un freelancer, por ejemplo de aquí.
- El debate ‘CSS de transparencia de imagenes. ¿Es posible?’ está cerrado y no admite más respuestas.
Foros WordPress.com en Español 