JMiur [E]

Hay muchos scripts que utilizan efectos para cambiar el contenido de algo cuando ponemos el puntero del ratón encima. Es lo que se llama un efecto rollover. Con CSS lo logramos usando :hover. Cambiamos colores, fondos, las fuentes de los textos, etc ¿Podemos cambiar más cosas? ¿Podríamos cambiarlo por completo, incluyendo su contenido?

Pués así lo muestran en SNOOK.ca y la idea es bastante simple.

Este es un ejemplo del código HTML básico:
<div class="infobox">
<img src="URL_imagen">
<div> un texto visible </div>
<div class="more"> y aquí ponemos el contenido que permanecerá oculto </div>
</div>
Y este es un estilo CSS de ejemplo:
.infobox {
border: 1px solid #345;
cursor: pointer;
padding: 5px;
position: relative;
width: 130px;
}
.infobox img {
position: relative;
z-index: 2;
}
.infobox .more {
display: none;
}
.infobox:hover .more {
background-color: #345;
border: 1px solid #89A;
display: block;
font-size: 20px;
height: 130px;
left: 0px;
padding: 5px 20px 5px 140px;
position: absolute;
text-align: justify;
top: 0px;
width: 400px;
z-index: 1;
}

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas hendrerit quam a elit luctus ut tempor leo congue? Maecenas blandit massa id mi blandit consectetur.

EL DIV infobox tiene la propiedad position establecida como relative lo que permite luego, posicionar su contenido de manera absoluta con left y top. La imagen también se posiciona de manera relativa para usar la propiedad z-index y, de esa manera, mantenerla visible aún cuando algo se coloca "encima" de ella.

Las propiedades a usar son variadas, dependerán de lo que se nos ocurra mostrar. Otro ejemplo:
.infobox {
-moz-border-radius: 10px;
background-color: #123;
border: 2px solid #567;
color: #ABC;
cursor: pointer;
font-size: 20px;
padding: 5px 10px;
position: relative;
text-align: center;
width: 180px;
}
.infobox .more {
display: none;
}
.infobox:hover .more {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
background-color: #101921;
border: 2px solid #567;
color: #EEE;
display: block;
font-size: 12px;
left: -2px;
padding: 5px 10px;
position: absolute;
text-align: justify;
top: -2px;
width: 180px;
z-index: 1;
}

El contenido visible a expandir.

Aliquam mattis purus vel leo dignissim vel pulvinar lectus hendrerit! Aenean facilisis ante vel lacus interdum ut lobortis enim aliquet. Vivamus sagittis feugiat est id rhoncus? Maecenas ut leo vel enim mollis tempor. Nullam ornare fermentum tempor. Proin eu interdum massa!


Y un último ejemplo:
.infobox2 {
color: #888;
cursor: pointer;
font-size: 16px;
font-weight: bold;
position: relative;
text-align: center;
width: 130px;
}
.infobox2 img {
position: relative;
z-index: 2;
}
.infobox2 .more {
display: none;
}
.infobox2:hover .more {
-moz-border-radius: 10px;
background-color: #333;
color: #BBB;
display: block;
font-size: 14px;
font-weight: normal;
height: 130px;
left: 0px;
padding: 15px 20px 10px 135px;
position: absolute;
text-align: justify;
top:- 5px;
width: 320px;
z-index: 1;
}

EXPANDIR
Sed interdum interdum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus fringilla aliquam lectus; laoreet accumsan magna vulputate eget. Aliquam vel quam mi.

33 comentarios:

Ariane  

adorei o efeito, obrigada pela explicação :)

Responder
Carlos Noceda  

Muchas gracias por el post, como siempre muy ilustrativo.

Saludos

Responder
Graciela  

guau chuchi se mueve todo :) a esta hora no sé si es falta de sueño jajaja
Queda muy bonito, había visto esa página no sé si la mencionaste antes o o o o buen viernes y besos!!!

Responder
Mon  

GEnial! Por cierto.. intenté poner la barra pero no supe acabarla por el tema de los contenedores... que bueno... no salieron bien. Gracias ! Volveré a intentarlo una tarde con tiempo y neuronas despiertas.

Chao!

;)

Responder
egoloco  

Seré yo? Será IE? El último ejemplo no lo puedo ver :S

Responder
ΜigueŁ jίмenez™  

Muy bien explicado, me imagino que tambien se podrán hacer algunos creativos menus :) hay alguna forma de poner un efecto hover?

Responder
AJ  

mira mi pana mi blog cuando pongo videos no se ven q hago para poder verlos a mi me dijeron q era un script pero yo no se nada de eso

Responder
Susy  

Estupendo!!!
pero en qué lugar de la plantilla colocamos todo eso?? :O
Ten paciencia conmigo, JMiur, que voy poco a poco y ya he tenido que recomponer casi todo un par de veces.

Besos.

Responder
JMiur  

A mi tambien me gustó la idea, me paree que puede tener muchas aplicaciones :)

egoloco: ya está solucionado, era un error del post. Tanto en IE7 como en IE8 deberías verlos sin problemas.

AJ: No necesitas ningun script para agregar un video. Basta copair y pegar el código que te dan los distintos servicios como YouTube. Si pones un ejemplo, me fijo.

Responder
Marcos Gabriel  

Bom vc ja tinha colocado algo parecidos ao usar imagens .. MAS mais uma vez o meu grande problema é o IE por não interpretar algumas tags de CSS 3.0 pois ate sistema de abas (sem javascript) pode ser criado so com CSS , a vantagem é claro é que fica mais leve .. a desvantagem é o maldito IE que ainda é detentor da maioria dos usuarios da internet

Responder
JMiur  

Sin embargo, MArcos, este funciona en en IE sin problemas porque no usa propiedades raras. Salvo que hablemos de IE6, claro :D

Responder
planck956  

Gracias¡¡¡

Responder
egoloco  

Ahora si lo veo Jmiur :D y segun vi en varios post este tipo de recursos se pueden usar para infinidades de cosas. Los efectos de Prototype y Scriptaculous, La famosa ventanita modal de LightWindow(que pienso aplicar dentro de muy poco), en fin, se que a este efecto le vas a sacar provecho. El contenido a ocultar puede ser cualquier cosa?

Nos "vemos"...

Responder
Cristian  

Me anduvo a la perfección!! gracias JMiur me encantas este tipo de hacks..podes verlo en esta dirección http://google-pirata.blogspot.com/ es un blog de prueba..

Responder
JMiur  

egoloco: El error había sido mio y no de IE :D Sí, puede usarse para casi cualquier contenido aunque imagino que para colocar Flash tal vez no pero no lo podría asegurar.

Cristian: Muy bueno :D ... ¿Boogle Argentina? Me encantó la idea :D

Responder
Cristian  

si aunque no me andan los "radio box" del buscador, que puedo hacer?

Responder
JMiur  

Aunque no sé qué código estas usando, debería haber algo que cambie el action del formulario en función de las opción marcada.

Responder
Susy  

No viste mi pregunta, seguro, como todos lo saben... se te pasó. En donde se coloca todo eso? repito, que ando que si lo pongo aquí o allá y no sé-

Un abrazo de recordatorio.

Responder
JMiur  

Es verdad, se me traspapeló, Susy :( Lo lamento.

El estilo CSS se coloca por ejemplo, antes de </b:skin>

El DIV, lo que va entre <div class="infobox"> y </div> es lo que lo muestra así qeu va en cualquier parte, donde quieras que se vea.

Responder
www.santoverdinegro.com  

Hola JMiur, quiero agregar, en relidad agregue una columna mas de entrdas al blog pruebas pero en una columna mas pequeña, pero pasa que cuando cargo una nueva entrda, se carga en las dos columnas, como hago para tener un comando(creacion de entradas) independiente para cada columna de entrdas, se podra, te muestro lo que hice.
TE DEJO LA DIR LE BLOD DE PRUEBAS, COMO SIEMPRE GRACIAS.
http://santoprueba.blogspot.com/

Responder
JMiur  

No sé cuál es la idea que tienes pero, las entradas son únicas, los posts son únicos. Puedes mostrarlos varias veces (dos columnas) pero no controlarlos. Podría mostrarse el post 1 y el post 2 uno al lado del otro, siempre se mostrarán en orden cronológico.

Responder
www.santoverdinegro.com  

la idea es que por lo general en un blog de informacion, la noticia de ultimo momento se coloca en la entrada,(notici y foto) cuando la noticia va perdiendo vigencia dia a dia va pasando a otro recuadro mas pequeño pero se sigue viendo y va desapareciendo a medida que se va renovando la informacion en una nueva entrada, o en su defecto otro sidebar mas pequeñodonde se pueda cargar foto y alguna noticia, si pudieras entrar a este sitio podrias ver mas o menos cual es la idea www.soyverdinegro.com.ar
desde ya como siempre gracias
santoverdinegro

Responder
JMiur  

Es que el sitio que me muestras de ejemplo no es un blog, ahí está la diferencia. Un blog siempre tendrá una estructura de orden cronológico y las entradas no son muy manipulables.

Responder
www.santoverdinegro.com  

HAA!!! Ok listo, bueno gracias, como siempre.

Responder
Yorelis Milena Rivera Gutierrez  

me encanta este blog, siempre tiene lo que quiero y deseo saber, muy buenas ilustraciones, sos un duro

Responder
El Chueco  

Hola Ayuda¡¡¡
Estoy probando el segundo ejemplo pero no me sale.
Si mi contenido es mas grande de lo normal como le hago para mostrar lo demas; Bueno es una tabla muy grande pero solo se muestra un solo pedazo.
http://anispruebas.blogspot.com/
Saludos.

Responder
JMiur  

Lo que ocurre es que, en tu ejemplo, al ser el último elemento de la sidebar, hacia abajo no hay nada y por lo tanto, no hay "espacio" donde expandir. No sé como resolver ese dilema.

Responder
El Chueco  

Lastima me habia gustado este efecto.
Esperemos que halla un a solucion.
saludos

Responder
JMiur  

Estuve mirando un largo rato tu ejemplo y, por ahora, no se me ocurre nada :$

Responder
Jordi  

Muy buenas!!
Muy bueno el diseño y la aplicación, lo he utilizado ahora y me ha funcionado de puta madre. Empiezo desde hace poco en el tema de los blogger por el curro, y aun no soy muy bueno, tu página a sido de gran ayuda, muchas gácias!!
Solo una pregunta please!!! Como hago para que en la parte visible poner una imagen y un texto bien alineado a su derecha? lo estoy haciendo en formato horizontal y no lo he podido resolver.... :S
Muchas gracias y sigue con el blog, vale muchissimo la pena!!!

Responder
Jordi  

Muy buenas!!!
Felicidades por el blog!! Por el trabajo he tenido que empezar a trabajar en el mundo de los blogger y tu pagina me ha servido de mucha ayuda.
He aplicado este truco de y me ha funcionado de mil maravillas. Solo tengo un problema que no he podido solucionar de ninguna forma... :S. Supongo que será muy simple, pero soy nuevo en esto y no hay maneras...
Lo estoy aplicando en un formato horizontal, y no se como poner el texto a la derecha de la imagen y que quede bien alineado!!
Muchas gracias y saludos!!!

Responder
JMiur  

Simplemente debes formatearlo par que se vea así com oquieres; no sé cuál es tu ejemplo o qué estás haciendo y no te satisface.

Responder
bryan mendez  

q buena información nuevamente me han salvado jejeje

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR