23

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>

Entradas Relacionadas:

23 comentarios:


Felicituri

Gracias Rosa. Tomo nota. Muy interesante para alguna entrada en concreto. Feliz Navidad.

@cosmoduende

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!

Pepsicolo

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.

Anónimo

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

ChocoJud

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

Anónimo

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>

Nicolai

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

Anónimo

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.

Anónimo

Que buena información, me fue muy útil al diseñar mi sitio web y algunos otros como este.

Muchas Gracias. :)

Anónimo

funciona de puta madre, muchas gracias!

marta

como ago para que al pinchar en esa imagen vaya a la pagina que yo quiera??

:0

marta

ya esta ya di con ello joe se nota que era mu temprano estaba espeso

Anónimo

master De todos modos, he incluido esa información en la entrada.

Master-Design

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.

Anónimo

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

Master-Design

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.

Anónimo

que interesante rosa, y para hacerlo con toda la pagina, por ejemplo el cuerpo de la pagina se le puede dar una opacidad

Anónimo

creartuebook Si, se puede... es más, si te interesa en Gem@ Blog encontrarás una fantástica entrada al respecto.

Cartoncita Rosa

Quisiera saber si es posible aplicarlo a mi faviconera, lo intenté pero no se ve la opacidad :(

Saluditos y gracias!

Anónimo

Viri Supongo que si, ya que es aplicable a cualquier imagen.

Cartoncita Rosa

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!

Sergio Gil

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

Anónimo

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.

:) :(( :( :P :D :$ ;) :I :X :O |O :S