Usando unas cuantas propiedades CSS en un código podemos conseguir grados de opacidad muy diversos y que después podemos aplicar a imágenes en nuestras entradas, en la barra lateral o en zonas del blog.
En esta entrada explicaré tres formas distintas de conseguir opacidad en imágenes.
Los ejemplos haremos uso de esta imagen (la cual no tiene opacidad)
Opacidad normal
A continuación te mostraré los principales grados que podemos obtener aplicando distintos porcentajes pero ten en cuenta que podrás editarlos.
Estos son los códigos necesarios para aplicar la opacidad de los ejemplos. Puedes colocar el código tanto en una entrada, en la pestaña de Edición de HTML...
Como en un elemento html-javascript (gadget) del apartado de Diseño.
Opacidad 60%:
<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.4;-khtml-opacity: 0.6;" src="URL DE TU IMAGEN"/>
Opacidad 50%:
<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;-khtml-opacity: 0.5;" src="URL DE TU IMAGEN"/>
Opacidad 40%:
<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40);-moz-opacity:0.4;opacity: 0.4;-khtml-opacity: 0.4;" src="URL DE TU IMAGEN"/>
Opacidad 30%:
<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);filter:alpha(opacity=30);-moz-opacity:0.3;opacity: 0.3;-khtml-opacity: 0.3;" src="URL DE TU IMAGEN"/>
Opacidad 20%:
<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);filter:alpha(opacity=20);-moz-opacity:0.2;opacity: 0.2;-khtml-opacity: 0.2;" src="URL DE TU IMAGEN"/>
Opacidad 10%:
<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);filter:alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1;-khtml-opacity: 0.1;" src="URL DE TU IMAGEN"/>
Pero como esto no es todo lo que se puede hacer con la opacidad en imágenes, vamos a ver otra forma de utilizar este truco: la creación de un efecto al pasar el cursor.
"Toca" las siguientes imágenes con el cursor para comprobar el resultado:
¿Te gusta? Aquí tienes los códigos necesarios:
Imagen normal y opaca al pasar el mouse:
<img style="opacity:1.0;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.3;this.filters.alpha.opacity=30" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" src="URL DE TU IMAGEN"/>
Imagen opaca y normal al pasar el mouse:
<img style="opacity:0.3;filter:alpha(opacity=30)" onmouseover="this.style.opacity=1.0;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30" src="URL DE TU IMAGEN"/>
Al igual que anteriormente, estos códigos también pueden utilizarse en entradas o gadgets (elementos de página) de la barra lateral.
Nota:
En cada código debes reemplazar URL DE TU IMAGEN por la dirección de tu icono o imagen [+].
¿Problemas al comentar? Utiliza 
que de cosas nos enseñas...he puesto lo de los comentarios
Hola Jaime,te acabo de conocer por otro blog y me parece que el tuyo es muy interesante,veo que te gustan los animales,eso ha sido decisivo para empezar a seguirte,yo tengo dos gatas,alguna sugerencia para que se hagan amigas? La nueva no puede ni ver a la otra,las tengo que tener separadas y es un infierno la convivencia,bueno si sabes algo y me puedes orientar te lo agradecería.
Besos
Sigo experimentando con esto de las imágenes... ^_^
Perdona, mira, aparte de la idea del menú con enlaces a las etiquetas, he visto una barra lateral que no tengo la más remota de cómo hacerla. Es la de esta página (la barra que aparece a la derecha) http://www.gurusblog.com/archives/guardado-datos-buscadores-google-ilegal/03/03/2010/. Si puede serte útil como idea, me alegro :)
¡Magnífico Espe! Esa nube queda espectacular y veo que, como indiqué en la entrada, la pusiste al final de la barra lateral para evitar que el blog se demore al cargar ;).
¡Cierto La gata sobre el tejado! acabo de leer el artículo que escribió acuruxamai (¡mil gracias!) y leí tu comentario.
Así es, me encantan los animales. En cuanto a lo de tus gatas... creo que es mejor explicarlo en un artículo (podré darte más detalles y estará mejor explicado). Además, voy a reformar todas las categorías durante este verano por lo que agregaré nuevas entradas en la categoría "Gatos" :D.
¡Abrazos!
Aurora, en breve añadiré a la entrada el como personalizar los porcentajes de opacidad para facilitarte la experimentación.
Si necesitas ayuda en algo dímelo.
Muchas gracias Jaime,estaré encantada de leer tus entradas,sobre todo las de los gatos.
Mil gracias
Hola Jaime.
Anda tu pica que te pica, y claro yo que no controlo pues ya la he mangado¡¡¡¡.
En otra cosa, que esta no la he probado, pero miedo me da.
¡¡ Ah¡¡ que chiquillo .
Bueno pero nos enseñas mucho , claro la mayoría de las veces acierto, aunque sea un poco la torpe .
Ya te lo cuento en el post referente a la que he preparado.ja...ja.
Gracias por todo .
Fuen
Y yo estaré encantado de tenerte por El Balcón, La gata sobre el tejado ;).
¡AAAAAy Fuentecillas! ¡Pero pregúntame! De veras, si deseas hacer algo en especial, aplicar opacidad a tus imágenes, editar el porcentaje de opacidad, crear un botón para tus lectores, cualquier cosilla... solo dímelo y te ayudaré con las más sencillas indicaciones.
¡Un abrazo!
Jaime!y a mi no me ayudas???:(
ya te he dejado varias preguntas y nada....
besitoss
todo bien,se que no tienes mucho tiempo!
claudia
Hola Jaime
¡¡ qué estrés te pillarías¡Yo por hacer todo y todo.
Pero , el tiempo es limitado, iré poco a poco.Además del peligro que tengo con esto del Internet.
Por cierto, como mamá que soy ¡¡ Esos exámenes gordos qué tal van¡¡
Hola Fuentecillas! Seguro que poco a poco conseguimos solucionar todas tus dudas y ya verás como consigues el blog que deseas. ¿Los exámenes? Acabo de terminar! Todo ha ido de maravilla y por suerte vuelvo con vosotr@s.
Claudia, por supuesto que intento ayudarte pero acabo de terminar los estudios y aún estoy respondiendo correos antiguos.
Desde que tenga un ratito te ayudo en todo lo que pueda ;).
Mil gracias Aurora! Lo tendré muy en cuenta ya que la sidebar dividida en secciones usando tabs o pestañas nos permite ahorrar mucho espacio y tiempo en cargar en el blog. Es muy probable que veas pronto una entrada al respecto.
estimado Jaime necesito su consejo.
¿Como instalada este truco para realizar el efecto en sus seguidores, podria por favor enseñarnos?
Quiero hacerlo en mi blog a mis seguidores de google y tambien la Faces de FACEBOOK, por favor enseñenos como aplcia este efecto, gracias
http://visiondeprofetas.blogspot.com
Hola Roger. Para aplicar el efecto opacidad al gadget de seguidores accede a esta entrada. Encontrarás la correspondiente explicación en el comentario número 14.
Con respecto a la segunda petición, debo decirte que aún no he publicado ningún truco para incluir los emoticones de facebook en blogger.
¡Saludos!
WOW!!!!! me dio por ver el blog otra vez y me sorprende que rapido atendio mi respueta, le agradezco esto.
Quiero decirle que http://visiondeprofetas.blogspot.com mi blog, todo lo que ve ha sido con su apoyo, no sabia nada de nada sobre blogs y ahora todo lo que se y lo que he logrado ha sido solo mediante su apoyo por medio de este blog y algunas otras colaboraciones del blog el escaparate de rosa, gracias
Jaime muchas Gracias, Dios le ama y le necesita, espero tenga a J3esucristo en su corazón, gracias por estos aportes tan geniales.
Gracias
Roger Casco, me llena de entusiasmo poder ver tantos artilugios en un blog asi de bonito. Felicitaciones por el esfuerzo que estás haciendo.
Gracias por el comentario y por tanta amabilidad y valoraración de los artículos que publico.
¡Recibe un fuerte abrazo!
Hola Jaime, esto es lo que estaba buscando, aunque me falta algo, ¿sabes cómo hacer que esas imágenes lleven a un enlace? O sea, hacer que una imagen al pasar el cursor por encima se vuelva normal y al hacer clic lleve a un enlace, es la idea de los cuadritos de este blog: www.letrasyescenas.com está en la barra lateral
Muchas gracias
Lo que buscas es muy fácil de conseguir, Carol.
En esta entrada explico como hacer que una imagen actúe como botón para acceder a cualquier sitio web.
En el caso de este truco, utiliza este código:
<a href="DIRECCION">CODIGO IMAGEN OPACIDAD</a>
Reemplaza DIRECCION con la URL de la página web o el blog que deseas vinculat y CODIGO IMAGEN OPACIDAD con el código de la imagen translúcida.
Gracias a ti por comentar.