Opacidad con imágenes (II)
En una entrada anterior explicaba como conseguir distintos grados de opacidad en una imagen.
En este post explicaré la forma de conseguirlo mediante CSS, esto será mucho más útil a quien quiera usar el efecto en su blog con varias imágenes a la vez, o más a menudo.
El efecto conseguido, además de quedar muy bonito estéticamente, da la posibilidad a nuestros visitantes de ver la imagen original al poner el cursor sobre la imagen opaca.
1- Incluimos este código en el CSS de la plantilla:
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
Si os fijáis en el código, yo he puesto "opacity" después de ".a" pero puede ponerse lo que mejor nos parezca, solo hay que recordar incluir el mismo nombre que hemos puesto, al hacer la "llamada" al CSS desde nuestra imagen: <a class="opacity"
2- Cada vez que queramos mostrar este efecto en una imagen, hemos de hacerlo así:
<a class="opacity" src="url_de_nuestra_imagen"><img src="url_de_nuestra_imagen"></a>
Incluimos dos veces la url de la imagen, una para mostrarla opaca y otra para ver la original.
Resultado
Nota:
Para incluir un enlace en la imagen, lo haríamos así:
<a class="opacity" href="dirección del enlace" src="url_de_nuestra_imagen"><img src="url_de_nuestra_imagen"></a>
a las
Etiquetas:
Trucos imagenes
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
23 comentarios:
Gracias Rosa. Tomo nota. Muy interesante para alguna entrada en concreto. Feliz Navidad.
Hola! me gustó mucho este blog! Me preguntaba si te gustaría intercambiar links o banners conmigo? que dices?
Espero respuesta, mi blog es http://gatobelze.blogspot.com
Saludos y felicidades! buen blog!
Hola Rosa yo estoy empezando en esto de los blogs. Me gustaria poner este efecto a la cabecera de mi blog pero no se donde hay que poner el codigo de la foto, se que hay que añadir al CSS, pero no consigo dar con el lugar de colocar el resto.
Gracias de antemano y sigue asi, estas ayudando a mucha gente.
Rupho, es algo complicado de explicar en un comentario, ya que para poder añadir este efecto en la imagen del header hay que hacer antes otros cambios en la plantilla.Más o menos y de forma resumida, te diré que la vabecera tal como está ahora no te sirve, hay que "deshacerse" de esa y añadir la nueva con el código directamente en la plantilla...Si te sigue interesando, envíame un email y te mando las instrucciones lo más rápido que me sea posible.
Por cierto, en el pie de tu blog, te has dejado "El Escaparate" en vez del nombre del tuyo ;-)
Hola Rosa!!! El otro día añadí los iconos de los marcadores sociales a mi blog, y me he fijado que los que tu tienes tienen este efecto de opacidad (creo que es este). He intentado hacer lo mismo con los míos pero soy algo torpe :(, si no te importa podrías explicarme como lo has hecho?.
Muchas gracias por adelantado XD
Gothikka, pues lo he hecho tal como ves en esta entrada, solo que he añadido el "class='opacity' a la imagen de cada marcador.
<a href='http://www.wikio.es/vote?url=http://deathgeneration.blogspot.com/2008/04/pura-realidad-bloggera.html&title=Pura realidad bloggera' target='_blank' title='Agregar a wikio'><img border='0' class='opacity'src='http://www.wikio.es/shared/img/vote/wikio2.gif'/></a>
Hola rosa :
Al conocer este blog solo me dije guauuu y de inmediato empese a renovar el mio estos trucos son lo mejor mira implente el efecto de opacidad en mi blog pero como la plantilla no es de blogger me apaerce un molesto marco que me le quita estetica me gustaria que me dijeras como conseguir donde esta el codigo de ese borde para quitarlo
Gracias
www.atanquez.com
Atanquez Tierra Hermosa
Souldes Maestre, necesitaría ver el blog donde estás usando la plantilla, si fuese de Blogger no sería necesario, pero como no lo es, tendré que verla.
Que buena información, me fue muy útil al diseñar mi sitio web y algunos otros como este.
Muchas Gracias. :)
funciona de puta madre, muchas gracias!
como ago para que al pinchar en esa imagen vaya a la pagina que yo quiera??
:0
ya esta ya di con ello joe se nota que era mu temprano estaba espeso
master De todos modos, he incluido esa información en la entrada.
Rosa te quería preguntar? si ese efecto se podría poner de forma automática, quisiera que estuviera en todas las imágenes de mi pots.
Pero es un poco complicado aplicarlo uno a uno en todo el blog.
Master-Design Prueba añadiendo esto en el CSS:
.postwrap img a{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
.postwrap img a:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
Rosa e puesto el código en el CSS como me sugeriste pero no pasa nada el efecto no aparese en todas las imágenes de las entradas.
Pero muchas gracias de todas formas eres increíble siempre estas dispuesta a ayudar y eso se agrádese mucho, seguiré poniéndolo de la forma anterior.
que interesante rosa, y para hacerlo con toda la pagina, por ejemplo el cuerpo de la pagina se le puede dar una opacidad
creartuebook Si, se puede... es más, si te interesa en Gem@ Blog encontrarás una fantástica entrada al respecto.
Quisiera saber si es posible aplicarlo a mi faviconera, lo intenté pero no se ve la opacidad :(
Saluditos y gracias!
Viri Supongo que si, ya que es aplicable a cualquier imagen.
Si que se pudo :D después de darle vueltas a los códigos poniendo el a class "opacity" por todos lados y finalmente darme cuenta que había puesto mal lo del CSS ya que quise agregarle una separación como la que nos explicaste para reconocer más facilmente un pedazo de código de otro jeje pero lo puse mal, asi que por eso no salía :$ al fin se pudo :D
Gracias de nuevo!
Hola Rosa
Estoy publicando un codigo con light windows y quiero agregarle opacity a la imagen. el CSS ya esta listo y funciona perfecto cn otras imagenes.
Este es el codigo que tengo:
a class="lightwindow" href="http://video.google.es/googleplayer.swf?docid=-5901541484851988630&hl=es&fs=true&autoplay=1" params="lightwindow_width=600,lightwindow_height=480" title="La ultima reunión de los Tobón Perez"><img border="0" height="381" src="http://4.bp.blogspot.com/_pEGyxdT_Tz8/TP6_-BMJ0gI/AAAAAAAAMTM/YIxjYUrB2Gs/s320/Tob%25C3%25B3n-perez.jpg" width="500"
pero no puedo agregar un a class dentro de otro a class por que no funciona.
Me puedes ayudar a construir el codigo correcto ?
Gracias
Sergio
Sergio No tengo idea de como funciona exactamente el lightwindow, es algo que aún tengo pendiente de probar... y no se entonces como debería exactamente trabajarse eso de la opacidad y si es posible... mejor pregunta donde has tomado el código, o revisa en Vagabundia hay alguna entrada al respecto de este tipo de efectos.
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo