Ver Mensaje Individual
  #2 (permalink)  
Antiguo 02/07/2013, 02:38
Avatar de pzin
pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Ando buscando un efecto como este

No me he parado a mirar cómo lo hacen. Pero no te hace falta JavaScript para conseguir el mismo efecto. Puedes combinar :hover, posiciones absolutas y opacidad.

Partiendo de un HTML como este:

Código HTML:
Ver original
  1. <a class="pelicula">
  2.   <img src="pelicula.jpg">
  3.   <div>el contenido que quieras ocultar/mostrar</div>
  4. </a>

Lo que haces es primeramente dar una posición relativa al enlace, para que haga de contenedor, y ocultas el div mediante opacidad, también ajustas el div interno para que ocupe el 100% —indicando que esté pegado a la izquierda y a la derecha— además de que esté posicionado arriba:

Código CSS:
Ver original
  1. a.pelicula {
  2.   position: relative;
  3. }
  4.  
  5. a.pelicula div {
  6.   position: absolute;
  7.   top: 0;
  8.   right: 0;
  9.   left: 0;
  10.   opacity: 0;
  11. }

Luego lo único que debes de hacer, es que al pasar por encima del enlace, que el div que contiene cambie su opacidad a 1:

Código CSS:
Ver original
  1. a.pelicula:hover div {
  2.   opacity: 1
  3. }

Si quieres además que la opacidad sea animada, puedes usar transition:

Código CSS:
Ver original
  1. a.pelicula div {
  2.   transition: opacity ease .5s;
  3. }

Mira la tabla de compatibilidad para el uso de transiciones: http://caniuse.com/css-transitions