Texto al pasar el mouse se vuelve imagen [efecto hover]

[dunkelheit]

Acá les traigo este pequeño efecto para el que lo quiera usar. La idea lo saqué del foro del Hi5 (alguien lo pidió), y luego busqué referencias de CSS y lo adapté para el Hi5. =D

La fuente de referencia: http://www.sidedev.net/blog/?p=79

Adaptado al Hi5 sería así:

<style>
#menu a{
overflow:visible;
background-image:none;
height:0px;
padding-top:17px;
}

#menu  a:hover{
display:block;
width:xxxpx;
height:xxxpx;
background-image:url(direccion de la imagen);
background-repeat:no-repeat;
overflow:hidden;
padding-top:0px;
text-indent: -9999px;
}

</style>

Y en "Acerca de mí" o en "Intereses" solo pegarian esto:

<div id="menu">
<a href="#">texto</a>
</div>

Vista previa:

By xdunkelheitx

Donde dice width y heigh poner las medidas de su imagen.

Espero que les sirva.

Saludos =D

[Barb Taiii]

Excelente.  Hay un código hover que es como un pop up que me gustaría adaptarlo para Hi5, pero no he podido, no soy buena con eso. Cuando lo pongo es como si todo lo que va después del código quedara dentro del pop up. 

[dunkelheit]

algo asi??

CSS POP-UP

=D

[Barb Taiii]

  No sale nada.

Es que se tiene un texto, cuando paras el cursor sobre el aparece una imagen, arriba, al lado... donde tú quieras. La explicación no es muy buena por que parece que es lo mismo que tú estás posteando. Es como en los blogs que hay una palabra que sobresalta, al parar el cursor te sale una burbujita con una info o alguna imagen. Pues el código es para hacer eso pero con una simple imagen.

[dunkelheit]

Mira de la pagina que puse CSS POP-UP


lo modifique un poco y me salio esto =D

Código:

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;

}

#lifestyle .subsection .box_profile_info_small_content {height:800px!important;}
</style>

RELLENO:

<a class="thumbnail" href="#thumb"><img src="http://img205.imageshack.us/img205/9389/ej1yp8.jpg" width="100px" height="66px" border="0" /><span><img src="http://img70.imageshack.us/img70/613/deathnotekg1.jpg" /><br />Simply beautiful.</span></a>

Son dos imagenes distintas una grande y otra chica puse esas de ejemplo , la e probado en un hi5 sin codigos y funciona(solo para pegarlo en acerca de mi)

Se veria asi:

By xdunkelheitx

[Barb Taiii]

Aaaa...perfecto. Thanx, eso mismo era lo que quería hacer. Na' más pude hacerlo en Myspace.  Hmmm..ahora a ver donde lo pongo...ya tengo muchas cosas en mi Hi5 

[dunkelheit]

Espero que te funcione porque no lo e probado en un hi5 con codigos =D lo que me preocupa es el espacia de la tabla

#lifestyle .subsection .box_profile_info_small_content

porque si lo quito no se veria el tamaño de la foto en hover =D por eso le aumente el tamaño =D.

[Barb Taiii]

Yo también lo probé en un profile sin otros códigos.

La parte de #lifestyle .subsection .box_profile_info_small_content  se la eliminé. Creo que siempre y cuando haya un espacio para que se vea completo el pop up no creo que sea necesario usarlo, es cuestión de ubicarlo en buen lugar y también del tamaño de la imagen o el texto que se quiera poner dentro del pop up.

 

[dunkelheit]

ahora que lo pienso tienes razon como en mi hi5 de prueba no tengo nada escrito no le daba el espacio suficiente =D!!!

entonces bien que te haya funcionado. =D

[Nanosistem]

Man el codigo que pusistes antes tambien se podria colocarlo en la seccion de #comments... osea que al pasar el mouse sobre un comentario salga al estilo pop-up? 

[dunkelheit]

nop, solo se puede este http://css.dire.com/index.php?topic=29.0 para los comentarios. El porque, pues muy sencillo para poder hacer tipo pop-up necesitas usar HTML y para modificar la seccion comentarios solo puedes usar CSS.


saludos =D!!

[Nanosistem]

men pero solo funciona en firefox... nu en ie 6
No habra alguna forma de hacerlo funcar alli? 

[dunkelheit]

si, IE 6 para abajo permite la utilizacion del efecto HOVER pero solo a enlaces , a partir de la 7 ya empieza a funcionar =D!.

[Nanosistem]

Conclusion: Mi navegador es una ......
Gracias por aclarar mis dudas man 

[dunkelheit]

bueno quizas exista una forma , yo lo hize para hacer un hover pero es muy dificil.

Igual como a cualquier persona te recomiendo que uses FIREFOX es mucho mas y si te gusta tanto el IE mejor actualizalo a la version 7...

Yo uso firefox 2 y IE 6 tmb.

[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