Para conseguir un efecto de transparencia como el que podeis ver en la imagen de abajo a la derecha, hay que localizar el apartado "post img" y añadir este código:
Como esta instrucción no está normalizada, hay que poner las tres que se indican para que sea visible en los navegadores más usuales. Al añadirlo directamente a la hoja de estilo (CSS), el efecto se aplicará a todas las imágenes que figuren en las entradas de vuestro blog. Si sólo quereis aplicarlo a una de ellas, habrá que ponerlo directamente en la ventana de creación/edición de entradas. De esta manera, una imagen que normalmente sería:
.post img {
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Firefox, Opera, ... */
opacity: 0.5; /* CSS 3*/
}
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Firefox, Opera, ... */
opacity: 0.5; /* CSS 3*/
}
Como esta instrucción no está normalizada, hay que poner las tres que se indican para que sea visible en los navegadores más usuales. Al añadirlo directamente a la hoja de estilo (CSS), el efecto se aplicará a todas las imágenes que figuren en las entradas de vuestro blog. Si sólo quereis aplicarlo a una de ellas, habrá que ponerlo directamente en la ventana de creación/edición de entradas. De esta manera, una imagen que normalmente sería:
<img style="DISPLAY: block;MARGIN: 0 0 0 0; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://DIRECCIONDELAIMAGEN" border="0" />
...habría que añadirle lo también marcado en negro para que "transparentara"...
<img style="DISPLAY: block; FILTER: glow(color=black)progid filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Firefox, Opera, ... */ opacity: 0.5; /* CSS 3*/ MARGIN: 0 0 0 0; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://DIRECCIONDELAIMAGEN" border="0" />
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
hola ps mi nombre es roberto y quisiera saber como le hago para poner una imagen y al pasar el puntero por ella aparesca ya sea en la parte de abajo a en cualquier lugar de la misma pagina usando onmouseover!
ResponderEliminarmi correo es engell1002000@hotmail.com
No es exactamente lo que pides, pero creo que también te puede valer.
ResponderEliminarEnlace
En lugar de onmouseover, se propone una solución con click.
Saludos
¿El equivalente de .post img en la plantilla Notepad chaos cuál es?, es que no lo encuentro :)
ResponderEliminarGrácias
#content .col01 img
ResponderEliminarLo tienes que crear.
Esta lindo el blog..Mucha creatividad..
ResponderEliminarNo me funciona, capaz que no comprenda bien
ResponderEliminarDime si quieres que TODAS las imágenes tengan transparencia o que sólo lo tengan alguna/s en concreto. Luego de ponerlo, me pasas la dirección del blog y me dices en qué imagen en concreto lo has usado.
ResponderEliminar¿y como haces para que el pasar el raton encima de la foto vuelva a su color original?
ResponderEliminarGRACIAS (:
Paatetico:
ResponderEliminar.post img {
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Firefox, Opera, ... */
opacity: 0.5; /* CSS 3*/
}
.post img:hover {
filter:alpha(opacity=1000); /* IE */
-moz-opacity:1.0; /* Firefox, Opera, ... */
opacity: 1.0; /* CSS 3*/
}
De todas formas, creo que es más conveniente aplicarlo individualmente a las imágenes que interese y no a todas que es lo que aquí se explica. Ver: Rollover (último apartado)
Hola oloman, me surge una inquietud. en la portada de mi plantilla normalmente las imagenes salen nitidas, w.kangutingo.com .- pero a raiz de unas trastadas y jugarretas que le hice al Html para mejorar la carga lo único que quedó sirviendo mal fué las imagenes de la HOME salen borrosas, he probado trastear con opacity o z-indez pero nada que logro poner nitidas las imagenes, ¿me puedes dar un consejo porfavor? Te estaré profundamente agradecido más de lo que ya estoy. ;) estaré atento a cualquier cosa, sé que todo lleva su tiempo, seré pasciente. Gracias y un saludo.
ResponderEliminar