Ya vimos cómo tener este efecto de opacidad en las imágenes al pasar el cursor sobre ella; en esa ocasión lo hicimos usando un poco de CSS en la plantilla y asignando una clase en la imagen.
Esta vez haremos lo mismo pero sin editar la plantilla, además con dos variantes, una es que una imagen con opacidad tome su color normal al pasar el cursor sobre ella, y otra que una imagen con color normal se muestre opaca al pasar el mouse.
Imagen con opacidad y color normal al pasar el mouse
<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>
Imagen normal y efecto de opacidad al pasar el mouse.
<img src="URL de la imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>
Sólo pega el código dentro de una entrada o un elemento HTML/Javascript y cambia lo que está en rojo por la URL de la imagen.
Ciudad Blogger
Esta Muy bueno el ejemplo, Gracias Potro.
ResponderEliminarHola Pepe,
ResponderEliminarIgual a mí me gustaron esas imágenes =)
Saludos!
y tengo una pregunta, me puedes dar el código o decirme alguna entrada que diga como hacer para poner las estadisticas del blog, como en el gadget tuyo que dice 'LA CIUDAD TIENE' y despues dice los dias, las entradas y los comentarios.
ResponderEliminarHola Ascesino96,
ResponderEliminarEn esta entrada está el gadget:
http://ciudadblogger.com/2009/09/gadget-de-estadisticas-del-blog.html
Saludos.
hola muchas gracias por el truco, y ya que estoy comentando, te pregunto como hacen esos blogs para ñadir íconos delante de los titulos de la sidebar, pero yo no quiero una icono solo, quiero una para cada entrada en especifico, por ejemplo, a la de últimos comentarios, añadirle un msn, y todo así, como puedo hacerlo?
ResponderEliminarUmmmm, no sé si te he entendido bien, hay una forma de poner un icono en los títulos de la sidebar, sino es eso dime un blog de ejemplo para verlo.
ResponderEliminarSaludos.
pa, me mataste, lo he visto pero no me encuentro donde, sino ya me hubiera fijado para orientarme un poco, pero mira, te explico, yo eh visto en algunos blogs que ponen por ejemplo, en el gadget de últimos comentarios ponen al lado del titulo un pequeño icono de un globo de dialogo, al lado de otro gadget, un icono que lo represente. Cómo se hace eso, porque yo se la manera de poner en sidebar h3 { background-image: url ('IMAGEN') } pero ese icono se pone en todos los gadgets, me entiendes??
ResponderEliminarTe puse el enlace entre el texto del comentario anterior, quizá no se ve por el color, te lo paso de nuevo:
ResponderEliminarhttp://ciudadblogger.com/2009/06/poner-iconos-en-etiquetas-y-otros.html
En esa entrada explico cómo poner un ícono distinto para cada gadget.
Saludos.
Perdón, el enlace anterior es para poner un ícono a los elementos del gadget, en este es para poner un ícono o una imagen de fondo en el título del gadget:
ResponderEliminarhttp://ciudadblogger.com/2009/08/poner-imagen-en-los-titulos-de-los.html
¡Hola, Potro! Espero que te la estés pasando súper, amigo.
ResponderEliminarFíjate que acabo de ver esta herramienta que acabas de poner y me gustó mucho. ¡Está excelente! Entonces pensaba preguntarte: "¿se puede hacer lo mismo para usar una imagen como enlace para otro sitio (Mi Perfil, por ejemplo) y si se puede hacer que se abra en una ventana nueva?". Entonces me dije a mí mismo: "¿y por qué no intentas hacerlo tú solo?". ¿Y qué crees? ¡Lo logré! Lo único que tuve que hacer fue manipular el código HTML y listo. ¿No te parece emocionante? Bueno, estoy seguro que muchos aquí pueden hacer eso y mucho más, pero para mí significa "dar un paso muy importante a un mundo mayor" como dice Obi-Wan Kenobi.
Ya puse esta herramienta en mi Blog y se ve excelente, pues con el fondo azul se ve como un fantasma, y aparece en "alta definición" al pasar el puntero del mouse.
No lo hubiera logrado sin tu ayuda, amigo. Sé feliz. Un abrazo de hermanos. ¡Saludos a todos! Chao.
bueno, lo provare y gracias por tomarte tu tiempo en estas pabadas, en serio!!!
ResponderEliminarCon el código que apliqué también tengo control sobre las dimensiones de la imagen.
ResponderEliminarHola Eduardo,
ResponderEliminarDe verdad me da mucho gusto saber que vas avanzando en esto de los códigos. Ya irás descubriendo que puedes hacer infinidad de cosas moviendo o agregando sólo unos caracteres.
Ya vi tu perfil en tu blog y me encantó cómo se ve la opacidad de esa imagen con el fondo azul de tu blog.
Felicidades!
ola hay forma de que no quede tan opaca la imagen? como se manipula
ResponderEliminarBusca dentro del código las dos veces que aparece esto:
ResponderEliminaropacity: 0.2
Cambialo por 0.5 u otro número mayor para tener menos opacidad.
Hola Potro, yo ya lo active, al final de cada post puse 2 imagenes para suscripciones, pero no se aplica ese efecto de opacidad. Sabes cual sea el problema? Saludos.
ResponderEliminarNecesitaría ver cómo estás poniendo el código y así detectar dónde está el problema.
ResponderEliminarSaludos.
Umm, el problema es que no se puede, solo dices que en una entrada o en un elemento html, no habia visto :S
ResponderEliminarCuando se aplica directo en la plantilla a veces no funciona, pero no siempre es el caso.
ResponderEliminar¿Puede suceder esto en una entrada escrita?. Quiero decir que cuando se pase el mouse, la enrtada publicada se ponga más opaca que las demás, como para poder visualizar que es "ESA LA ENTRADA QUE SE LEE" sin entrar en ella.
ResponderEliminarAgradezco tu respuesta Potro, muchas gracias.
Con este truco no, pero puedes hacerlo con este otro.
ResponderEliminarSaludos.
GRACIAS
ResponderEliminarhey amigo gracias por el truco, peo me gustaría hacerte una pregunta, como modificas el % de opacidad de la imagen? es que he modificado los valores y no sucede nada...
ResponderEliminarte lo agradeceria
Se cambia donde dice opacity: 0.2; filter:alpha(opacity=20) y this.style.opacity=0.2;this.filters.alpha.opacity='20';
ResponderEliminarSi lo quieres menos opaco entonces cambia esos valores por otros más altos, por ejemplo, si lo quieres a la mitad de opacidad entonces cambia 0.2 por 0.5 y cambia el 20 por 50
Potro, me encanta tu blog. Está genial!
ResponderEliminarTe quería preguntar si se puede lograr este efecto al mismo tiempo en TODAS las entradas. Gracias por los trucos y la buena onda! :D
Se le puede poner la opacidad a todas las imágenes de manera automática pero no tendrían el efecto al pasar el cursor, así que es necesario hacerlo en todas las entradas donde se desee mostrar.
ResponderEliminar¡Saludos y gracias por tu comentario!
dioooooooooooooos no me anda ayudame por diooos!
ResponderEliminarCon gusto Berenice, pero necesito saber más detalles para poder hacerlo, como en qué blog lo has puesto, y si te aparece algún error, o sólo más detalles.
ResponderEliminarcomo siempre, tu blog me salva!!
ResponderEliminarHola Potro esta muy bien, este truquillo pero quisiera ponerlo en general para todas la imagenes de mi blog, quisiera saber si esto se puede hacer..!!GRACIAS..
ResponderEliminarHola Mauricio,
EliminarEste no porque usa Javascript directo en la imagen, pero al inicio de la entrada hay un enlace a un método con CSS, ese sí puedes aplicarlo a todas las imágenes de tu blog, sólo cambia a.opacidad img por img
Y a.opacidad:hover por img:hover
Este comentario ha sido eliminado por el autor.
ResponderEliminarComo cambio la "URL de la imagen"
ResponderEliminarMira esta entrada para que veas cómo obtener la URL de una imagen:
Eliminarhttp://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html
como hago para que la imagen con el efecto de opacidad tenga también un link que redirija a otra pagina?
ResponderEliminarEncierra el código de la imagen entre <a href="URL del enlace"> y </a>
Eliminar:D genial gracias! una cosita mas (si es que se puede..) como puedo configurar la opacidad? :B
EliminarMira el comentario #24 ;)
Eliminarah :) muchas gracias! a la próxima leo mejor :p
Eliminaroye una pregunta como hago para que todas mis imagenes esten opacadas?
ResponderEliminarPega antes de ]]></b:skin> esto:
Eliminar.post img {
opacity: 0.2;
filter:alpha(opacity=20);
}
.post img:hover {
opacity: 1;
filter:alpha(opacity=100);
}
¡Buenas tardes!
ResponderEliminar¿Como hago para tener 4 imágenes al 100% de opacidad y cuando pase el mouse over por una de ellas las restantes pasen a 50% de la opacidad? Es un estilo de menú que estoy creando
Gracias!
Buenas tardes mauricio, es más o menos de la misma forma pero aplicand los estilos CSS en la plantilla, como esto:
Eliminarhttp://ciudadblogger.com/2009/08/efecto-de-opacidad-en-las-imagenes.html
Me ha servido mucho gracias...
ResponderEliminarHola como estas? , este blog es excelente! espero que puedas responder esta duda que tengo. ¿Como puedo hacer el mismo efecto pero añadiendole un texto informativo y con una velocidad de opacidad mas lenta?. Aqui te paso un link como ejemplo: http://www.fosterandpartners.com/projects/
ResponderEliminarNo tengo una entrada sobre ello Cesar, pero en cuanto retome de lleno el blog procuraré publicarlo de inmediato.
EliminarSaludos.
Buen día, Potro
ResponderEliminar¿Es posible hacer una transición suave de la opacidad?¿Sabes cómo?
Gracias
Hola Elek Tron. Sigue el mismo procedimiento del comentario #34.1, pero debajo de .post img { y .post img:mover { pon esto:
Eliminar-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
Gracias, Potro.
EliminarSólo quiero que se afecte la imagen en un gadget determinado y no todas las imagenes del blog. ¿Es posible?
Sólo cambia esto .post img { y .post img:hover { por:
Eliminar.opacidadimg { y .opacidadimg:hover {
Luego dentro del código de la imagen agrega:
class='opacidadimg'
Mil gracias
EliminarHola
ResponderEliminarMuchas gracias!
Es posible poner que ademas que cuando se vuelva opaca la imagen aparezca un texto sobre ella?
Gracias.
Con este código no, pero quizá puedas combinarlo junto con este:
Eliminarhttp://www.ciudadblogger.com/2014/04/pie-de-foto-con-fondo-y-sobre-la-imagen.html
Bueno
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar