Imagen agrandada de perfil y al pasar el mouse cambia de imagen.

[dunkelheit]

Bueno, este es el mismo código de agrandar imagen de perfil con la diferencia que se le aumenta un hover para que cambie al pasar el mouse.

ESTILO:

<style>
#user-picture {background-image:url(Dirección de la imagen normal); background-repeat:no-repeat}
#user-picture a, div#user-picture {width:xxxpx; height:xxxpx}
#user-picture a img {visibility:hidden}
#user-picture a {display:block}
#user-picture a:hover{background-image:url(Dirección que cambia al pasar el mouse); background-repeat: no-repeat}
</style>

Ya saben, las imágenes deben ser de la misma medida para que se vea bien. Donde dice width y heigh son lo ancho y alto de la imagen.


Saludos

[Geovannyyy]

buuuu k mal

no me salio el codigo


q paso?

por favor dime si algo salio mal

[dunkelheit]

hola ps la gente no es adivina, ¿haz puesto bien las direcciones de las imagenes?,¿ la medida de las imagenes?, y tambien tienes que ver si tienes otros codigos que modifiquen la imagen de perfil.

saludos

[Geovannyyy]

jejejejeje siento no haver sido lo suficiente mente especifico, el codigo ya me salio pero la segunda imagen sale un poco desvia y acabo de notar que tambien sale asi en tu ejemplo.

Solo me preguntaba si esto se puede solucionar

jejejeje  agradeceria tu respuesta

[Barb Taiii]

Añadele esto al código para que la segunda imagen salga centrada:

background-position:center center;


Así:

<style>
#user-picture {background-image:
url(DIreccion de la imagen normal); background-repeat: no-repeat;
}
#user-picture a, div#user-picture { width: xxxpx; height: xxxpx;}
#user-picture a img { visibility: hidden;}
#user-picture a { display: block}

#user-picture a:hover{background-image:
url(Direccion que cambia al pasar el mouse); background-repeat: no-repeat;
background-position:center center;
}</style>

[Geovannyyy]

que mal, no funciona, ia no kiero molestarlos, por lo que diria que mejor se quede asi. bueno gracias de todos modos

[*Aηnghеll-]

Pues el codigo esta bien..
el problema seria que tal vez
esta chocando con otro..
Revisalo..
Si no postea tu codigo aqui
para ver cual es el error!

[Geovannyyy]

mmmm  pues el codigo es el mismo de arriba, es este:

<style>
#user-picture {background-image:
url(DIreccion de la imagen normal); background-repeat: no-repeat;
}
#user-picture a, div#user-picture { width: xxxpx; height: xxxpx;}
#user-picture a img { visibility: hidden;}
#user-picture a { display: block}

#user-picture a:hover{background-image:
url(Direccion que cambia al pasar el mouse); background-repeat: no-repeat;
background-position:center center;
}</style>

[Dany Van Buuren]

Pues el codigo esta bien
tal vez lo que esta mal
son las URL de tus imagenes.

Si quieres pon aca las URL de tus
imagenes y yo te armo el codigo

[natzell]

#user-picture {background-image:
url(DIreccion de la imagen normal); background-repeat: no-repeat;
}
#user-picture a, div#user-picture { width: xxxpx; height: xxxpx;}
#user-picture a img { visibility: hidden;}
#user-picture a { display: block}

#user-picture a:hover{background-image:
url(Direccion que cambia al pasar el mouse); background-repeat: no-repeat;
}
</style>

[Vɑnessɑ Trujillo]

ee de nuevo una corrección amigo xD!! el code tuyo seria así :

<style>
#user-picture {background-image:
url(direccion de la imagen normal); background-repeat: no-repeat;
}
#user-picture a, div#user-picture { width: xxxpx; height: xxxpx;}
#user-picture a img { visibility: hidden;}
#user-picture a { display: block}

#user-picture a:hover{background-image:
url(Direccion que cambia al pasar el mouse); background-repeat: no-repeat;
}
</style>

Lo de rojo-> es lo que te falto en el code ^^!

[alexxx]

HOLA, HE PUESTO EL CODIGO COMO ESTA AKI, PERO SI ME SALE UN POCO DESVIADA LA SEGUNDA IMAGEN CON RESPECTO A LA PRIMERA, ESPERO ME PUEDAN AYUDAR A CORREGIR ESTE PEKEÑO PROBLEMA... GRACIAS!!

[Vɑnessɑ Trujillo]

ee de nuevo una corrección amigo xD!! el code tuyo seria así :

<style>
#user-picture {background-image:
url(direccion de la imagen normal); background-repeat: no-repeat;
}
#user-picture a, div#user-picture { width: xxxpx; height: xxxpx;}
#user-picture a img { visibility: hidden;}
#user-picture a { display: block}

#user-picture a:hover{background-image:
url(Direccion que cambia al pasar el mouse); background-repeat: no-repeat;
}
</style>

Lo de rojo-> es lo que te falto en el code ^^!

Pues Amigo Puedes Mover A tu gusto las xxx que están De Amarillo por Números y así acomodas el code =)
Y por cierto

•Bienvenido A css Hi5!!•

[JOHN XS]

HOLA A TODOS.....PARA EL CREADOR DE ESTE POST.....LA IMAGEN SI SALE DESVIADA Y NO ES POR INTERFERIR CON OTROS CODIGOS.....PERO YA LO ARREGLE SENCILLAMENTE SOLO AGREGANDO LO MISMO QUE PUSISTE PARA CENTRAR LA FOTO EN HOVER A LA NORMAL Y LISTO......AQUI LES DEJO EL CODIGO COMPLETO ESPERO LES SIRVA

#user-picture
{background-image:url(URL DE LA IMAGEN NORMAL);
background-repeat: no-repeat;
background-position:center center;}

#user-picture a, div
#user-picture {width:XXXpx; height:XXXpx}
#user-picture a img {visibility: hidden}
#user-picture a {display: block}
#user-picture a:hover{background-image:url(URL DE LA IMAGEN CON HOVER);
background-repeat: no-repeat;
background-position:center center;}

NARANJA= LOS PIXELES DE TU IMAGEN
ROJO=URL DE TUS IMAGENES
AMARILLO=LO QUE SE TIENE QUE AGREGAR AL PRIMER CODIGO QUE DIERON

[JESSY]

hola amix... tu truquito esta de pelos-.... pero tengo un incomveniente... no sale la imagen en grande... solo sale una parte y al pasar el cursor sale la otra imagen pero tambien solo una parte.... como hago plissss pa que funcione bien,.....esque no soy muy buena en esto de la tecnologia jiji....  PORFA HELP ME!!!!1 PLISSS SIIIIIIII?

[Checa lo Nuevo!!!]

  Checa lo Nuevo!!!
     Twitter
     Informatica
  Batallas
     (H) Batallas
     (MS) Batallas
     (D) Batallas Individuales
  Ultimo Tutorial
     (Ps) Fotos HDR
  Complementos (D)
     (Ps) efecto glossy

Copy this|Start New|Full Size

• Barb Taiii - 145
• Vɑnessɑ Trujillo - 70
• Djxxx - 51
• dunkelheit - 51
• *Aηnghеll- - 48
• « REYES » - 36
• jordieB - 36
• Venom Mkr - 33
• KORE - 26
• H U G O™ - 26