Foros del Web » Creando para Internet » CSS »

Mostrar borde en imagen en rollover

Estas en el tema de Mostrar borde en imagen en rollover en el foro de CSS en Foros del Web. Tengo una imagen, la cual tiene que ser un link a otra pagina. Quiero que el borde NO se vea cuando esta en su estado ...
  #1 (permalink)  
Antiguo 26/11/2010, 18:05
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
Mostrar borde en imagen en rollover

Tengo una imagen, la cual tiene que ser un link a otra pagina.
Quiero que el borde NO se vea cuando esta en su estado normal, pero que si se pinte cuando el cursor esta sobre la imagen.

He intentado agregar borde al img con la pseudo-clase :hover, pero cuando aparece el borde, se mueve la imagen asi como el contenido que lo rodea. Ademas, lei que IE solo aplica la pseudo-clase hover a los <a>

Alguien podria ayudarme?


EDICION:

Hice una clase .imagen, y se la agregue a mi <a>, la cual rodea mi imagen, pero sigue moviendose.
Ademas, no se porque el borde no me rodea la imagen, sino que aparece como un rectangulo DEBAJO del <img>. ¿Acaso no escribi bien el HTML?

Código HTML:
<a href="pagina.html" class="imagen"><img src="images/producto.png" width="150" height="150"/></a> 

Aqui esta mi CSS

Código CSS:
Ver original
  1. .imagen{
  2.     border-width:0;
  3.     margin: 0 24px 12px 24px;
  4. }
  5.  
  6. .imagen:hover{
  7.     border: 2px solid navy;
  8. }
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!

Última edición por Anya82; 26/11/2010 a las 18:30
  #2 (permalink)  
Antiguo 26/11/2010, 18:11
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Mostrar borde en imagen en rollover

Podrías poner la imagen dentro de un link, en el estado normal, darle un borde del color de tu fondo y en el estado hover cambiarle el color del borde.

También podrías darle un margin de 1px en el estado normal y quitarselo y ponerle borde en el estado hover.

Y así un sinfín de opciones =)

Saludos!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 26/11/2010, 18:13
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
Respuesta: Mostrar borde en imagen en rollover

Si lo habia pensado, pero olvide mencionarles que el fondo tiene una imagen.
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!
  #4 (permalink)  
Antiguo 27/11/2010, 19:06
 
Fecha de Ingreso: junio-2010
Mensajes: 183
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: Mostrar borde en imagen en rollover

Cita:
Iniciado por Dalvenjha Ver Mensaje
Podrías poner la imagen dentro de un link, en el estado normal, darle un borde del color de tu fondo y en el estado hover cambiarle el color del borde.

También podrías darle un margin de 1px en el estado normal y quitarselo y ponerle borde en el estado hover.

Y así un sinfín de opciones =)

Saludos!


HOla mi nombre es rafret he puesto mi tema pero hace dos dias no recibo respuesta me puedes ayudar?
mi tema es problemas con div en internet explorer 6
  #5 (permalink)  
Antiguo 27/11/2010, 19:30
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Mostrar borde en imagen en rollover

uhmm el fondo tiene una imagen?, entonces haz un falso border, ponle a tu imagen 1px de padding, luego en el background normal pones none, entonces en el estado hover, pones el background del color que quieras y voila! tienes un falso border =)
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #6 (permalink)  
Antiguo 28/11/2010, 08:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mostrar borde en imagen en rollover

A ver si he comprendido bien:
.- Tienes una imagen como link. Lo cual debería traducirse en el html en algo así:
Código HTML:
Ver original
  1. <a href="#" title="título del enlace"><img src="imagen.jpg" alt="texto alternativo" /></a>
.- Esa imagen tiene como background otra imagen colocada vía css.
---------> Ello implica que deberá tener un padding para que se vea por los lados el bg
.- Esa imagen carece de bordes en estado normal
.- Al :hover deseas que aparezca un borde a la imagen de 1px sin que ello conlleve movimiento de los elementos adyacentes (que es lo lógico).

Si mi comprensión es cierta, sólo necesita añadir al "a:hover img" un margen negativo de igual valor a la anchura del borde.
Y si tienes declarado valores para el margen del enlace (o de la imagen dentro del enlace), restarle el valor del borde.

El css quedaría algo como:
Código CSS:
Ver original
  1. a img {
  2. background: url(imagen.jpg);
  3. padding: 5px;
  4. border: 0;
  5. margin:10px;
  6. }
  7. a:hover img {
  8. border: 1px solid #fe0;
  9. margin: 9px;
  10. }
  #7 (permalink)  
Antiguo 28/11/2010, 08:56
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Mostrar borde en imagen en rollover

Pues es una de las cosas que ya le mencioné antes, aunque tb has puesto el código =D.

Pd.- Tengo la mala costumbre de pensar que lo que yo entendería a la primera los demás lo entenderán igual.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #8 (permalink)  
Antiguo 28/11/2010, 15:01
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
Respuesta: Mostrar borde en imagen en rollover

hola a todos. Gracias por su ayuda.

Acabo de leer sus opiniones, y mi problema lo resolvi similar a lo que me comentaron:

cuando mi imagen esta en hover, indico que tenga el border.
cuando esta en estado normal, le quito el border, pero a los padding les di valores negativos.

Código CSS:
Ver original
  1. a.imagen img{
  2.     border-width:0;
  3.     margin: 0 24px 12px 0px;
  4. }
  5.  
  6. a.imagen:hover img{
  7.     border: 2px solid navy;
  8.     margin: -2px 22px 10px -2px;
  9. }
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!

Etiquetas: rollover, bordes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:33.