Iluminar una imagen pasando el puntero, con nueva función
-
ta bien, pero como la pongo esk soy n00b en programacion web
-
Bueno antes de nada, no sé si esto lo habrán posteado yo no lo he visto, no obstante aquí os lo dejo pues es muy util.
A casi cualquier persona le agrada que una parte de la imagenes de su web o por así decirlo las que más destaquen o las más numerosas, se "iluminen" cuando le pasemos el puntero por encima.
Podriamos decír que le da un toque como de más interactiva o incluso ¡multimedia!Bueno pues este código Html que os traigo aquí es algo por el estilo pero más discreto es decír, la imagen a la que le apliquemos dicho código obtendrá un grado de transparencia más alto que de su forma original, cuando pasemos el puntero por encima no es que la imagen en sí se ilumine, sino que se desactiva fluidamente la transparencia.
Direis pues vaya jilipollez, pero no es así pues de este modo podemos plagar nuestra web de imagenes muy llamativas y que cansarian la vista a cualquiera al cabo de un rato, esta vez solucionando ese problemilla.
Si alguien quiere un código que las ilumine aún más no tiene más que pedirlo :icon_mrgreen:
Espero que les sirva!
-
eso si no me equivoco es un estilo hasi que tienes que agegarlo por clase por ejemplo:
y tal asi
pero como veo ese codigo sirve solo con mozilla firefox es mejor usar css3 y que sirva con todos los navegadores casi todos ya que internet explored no soporta css3 xD
un bonito efecto de iluminacion puede ser
#iluminacion{ background-image: url(imagen); -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); } #iluminacion:hover{ box-shadow: 0px 0px 5px #FFFFFF; -webkit-box-shadow: 0px 0px 5px #FFFFFF; -moz-box-shadow: 0px 0px 5px #FFFFFF; -webkit-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px); -moz-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px); -o-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px); }bueno algo asi es un ejemplo xd
-
u.u Dirás que si soy Burro pero no no pude descifrarlo, nisiquiera el edit plus pudo xD,
Puedes dejar un ejemplo, y para no complicarnos con las imágenes pon esta :http://www.cosasdefinanzas.es/images/Apple-manzana-logo.jpegGracias
Saludos -
que quieres haser ? el efecto de el o el mio? XD
-
Si quieres que funcione para TODAS las imágenes de tu web (por probar):
Si quieres que funcione solamente en imágenes que estén dentro de un enlace
(es decir, que tienes algo así: )
hr
Pero mi consejo es que lo pongas usando las clases, así:Y el código para que una imagen funcione con el efecto:
Y por si aun quedan dudas de dónde va cada cosa, ejemplo completo:
 En ese ejemplo hay 2 imágenes (es la primera que he pillado xD). Una tiene el class="efecto" y la otra no. Como verás, el efecto solo funciona en una de ellas, que es lo interesante, ya que poner todas las imágenes de la web con esa opacidad quedaría bastante mal.
-
@Salvatore said:
Y por si aun quedan dudas de dónde va cada cosa, ejemplo completo:
 Eso es lo que todos buscais, no os compliqueis más. Y como ha hecho Salva podeis ir añadiendo imagenes entre no hay problemas con la cantidad pero hay que añadirle el class="efecto", podeis alternar para que unas lo utilicen y otras no, por ejemplo en mi web tenia la lista de afiliados con tal efecto y seguidas imagenes normales y corrientes. :icon_twisted:
