Capa que descubre una foto: ¿CSS, jQuery...?
Hola a todos,
antes de explicaros cómo intento resolverlo, preferiría q me dijérais como resolveríais vosotros esta situación, quiero decir: sólo con css, con jquery, etc.?
Os explico:
tengo una foto que la quiero tapar con una capa de color encima.
Al hacer rollover sobre la capa de color, debería bajarse, de tal manera q se mostrara la imagen.
Al hacer rollout, la capa de color volvería a subir, tapando así la imagen.
A tener en cuenta:
1. Ojo! La imagen no se mueve, siempre está en la misma posición y debajo de la capa
2. Sobre la capa de color hay un texto. Esto implica q la capa no puede hacer un tween hasta reducirse ... pq en ese caso se achataría el texto.
3. No es importante q haya un efecto de tween al pasar del estado rollover al rollout. Me conformo con q funcione bien.
markshock
Este recurso está muy bien, va por ustedes!
http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
transparentpixel
Gracias a todos por vuestras aportaciones! No he podido acceder al foro hasta hoy! Y vaya sorpresa! :-D
MrSoriano, es casi casi lo que busco. Me conformaría con tu ejemplo, si no fuera por el tutorial de Caracool ... Ah! Y por cierto, muchas felicidades por la web!
Caracool, estupendo! Justo lo que buscaba! Me pongo manos a la obra! Muchas gracias!
Saludos x todos!
caracool
Un tutorial completo de lo que buscas con diferentes opciones por si no te decides.
http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
Usuario desconocido
Yo hice algo así. Mira esto
¿Es eso lo que quieres?
isma
¿Esto es un examen?
<div id="principal">
<div id="imagen"><img src="" alt="" title="" /></div>
<div id="info">Info</div>
</div>
El Div principal con overflow a hidden, position absolute y width and height bien definidos (esto es importante, ya que actúa como máscara). El z-index si quiere defínelo, aunque por defecto según los elementos HTML que vaya encontrando los va apilando automáticamente (hasta donde yo conozco). La capa 'info' también en absolute.
Aplica un 'listener' al div principal (mouseover, mouseout) y mueves la capa info.
Si 'Googleas' un poco te salen muchas cosas para mover con jQuery, Mootools o Javascript a pelo (habrá que dejarte hacer el javascript por lo menos ;) )
smalonso Mod
Si no hace falta tween puedes jugar con el z-index de las capas, y eso sería puro CSS. Sino también tienes la opción jQuery, que te aportará alguna transición seguro...
ernexbcn
Eso con jQuery es fácil.
transparentpixel
Gracias Li Genzken, por tu rápida respuesta. Pero, en esta ocasión evito Flash!
Quién da más?
li-1
¿Flash...?