Cómo dar más brillo a las fotos al pasar el ratón sobre ellas en una página web

jarvin · 30 Ene 2013

Alguien sabe como se hace para que en tu web cuando pasas el ratón por encima de una foto se muestre con más brillo? que haga eso con todas las fotos

Me han dicho que es con este código pero no sé donde ponerlo

a.mainmenu img{
filter:alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}
a.mainmenu:hover img{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
a.mainmenu:hover{
position: relative;
top: -2px;
}

Alguien sabe como hacerlo?

Marianito · 30 Ene 2013

Esto te puede servir. Necesitas la imagen común y la que tenga más brillo

Cambiar imagen al pasar el mouse | Ciudad Blogger - Trucos y tutoriales para tu blog

neburor · 30 Ene 2013

jarvin dijo:
Alguien sabe como se hace para que en tu web cuando pasas el ratón por encima de una foto se muestre con más brillo? que haga eso con todas las fotos

Me han dicho que es con este código pero no sé donde ponerlo

a.mainmenu img{
filter:alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}
a.mainmenu:hover img{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
a.mainmenu:hover{
position: relative;
top: -2px;
}

Alguien sabe como hacerlo?

Ese codigo es correcto, va en los estilos CSS, pero debes ponerle a la ruta (clase) donde va a estar la imagen, en este codigo indica que es un enlace con la clase mainmenu y dentro es enlace es una image, se le aplicatia a todos los links de imgenes con esa clase

jarvin · 30 Ene 2013

neburor dijo:
Ese codigo es correcto, va en los estilos CSS, pero debes ponerle a la ruta (clase) donde va a estar la imagen, en este codigo indica que es un enlace con la clase mainmenu y dentro es enlace es una image, se le aplicatia a todos los links de imgenes con esa clase

Hay que modificar el código para cada foto que se sube o lo hace automaticamente en todas las fotos de la web?

neburor · 30 Ene 2013

jarvin dijo:
Hay que modificar el código para cada foto que se sube o lo hace automaticamente en todas las fotos de la web?

tu le tienes que asignar la clase mainmenu a los enlaces de imgenes y a esas images se les aplica

Insertar CODE, HTML o PHP:

<a href="" class="mainmenu" /> <img src="" alt="" /> </a>

Poka · 30 Ene 2013

Debes poner ese codigo en el CSS que tiene adjuntando al html. Luego vas a los "a" y le pones la clase mainmenu.

Ya tendría que funcionar. Saludos!

DoctorPC · 30 Ene 2013

Ojo que en algunos exploradores mas viejos no se ven stos efectos...

Koletta · 15 Feb 2013

Yo creo que lo mas fácil es hacerlo como ha dicho Marianito:

<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>

Cambia lo que está en rojo por la URL de la imagen que tendrás inicialmente, y lo que está en verde por la URL de la imagen que cambiará al pasar el mouse. Trata que las dos imágenes tengan el mismo tamaño para conseguir un mejor resultado.

ramifenili · 19 Feb 2013

¿Qué plataforma estás usando?, ¿se puede ver más código?

Koletta dijo:
Yo creo que lo mas fácil es hacerlo como ha dicho Marianito:

Supongo que tiene varias fotos y va a ser medio lío hacerlo con cada foto, además de que sólo quiere agregar brillo.

Subaru · 21 Feb 2013

Koletta,

Si bien tu metodo es quiza mas sencillo en algunos sentidos, no es la solucion mas practica y precisa imagenes adicionales que no son necesarias. "Opacity" fue implementado justamente para no precisar de instrucciones como esas.

Sin embargo Opacity creo aun no funciona en IE, o no funciona en la mayoria de las versiones. Aunque en firefox y chrome no deberias tener problema siempre y cuando uses los vendor prefixes (-mox- y -webkit- )

Te recomiendo, si quieres que ademas el cambio de opacidad sea gradual, añadas la instruccion "transition"

digamos que tienes un img con class "abc"

.abc img{
opacity: 0.5;
transition: all 0.3 ease;
}

.abc img:hover{
opacity:1;
}

Esto te daria un cambio de opacidad mas sutil y gradual. ( no olvides poner tambien vendor prefixes en la instruccion transition. )

En el siguiente sitio, el cambio de color de los botones del menu esta tambien hecho con :hover y transition

Cómo dar más brillo a las fotos al pasar el ratón sobre ellas en una página web

jarvin

Marianito

neburor

jarvin

neburor

Poka

DoctorPC

Koletta

ramifenili

Subaru

Temas similares