[SOLUCIONADO] Ando buscando un efecto como este

[ramondevesa]

Buenas, estoy tanteando llevar a cabo el siguiente efecto:

http://www.nubeox.com/?gclid=CPSM5qqlkLgCFefKtAod-FQAjA

Si pasair el raton por encima de las carátulas veréis que nos muestra el precio de la película y su valoración, pienso que esto puede estar echo como JavaScript en HTML 5 ¿no? la duda comienza cuando, yo hasta ahora lo que he echo ha sido un hover con CSS para cambiar de color o tipo de letra, pero no para esconder o visualizar un texto o en el caso de la valoración una imagen.

¿alguna ayuda? :)

[pzin]

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:

<a class="pelicula">
  <img src="pelicula.jpg">
  <div>el contenido que quieras ocultar/mostrar</div>
</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:

a.pelicula {
  position: relative;
}
 
a.pelicula div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
}
 

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:

a.pelicula:hover div {
  opacity: 1
}
 

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

Código CSS:

a.pelicula div {
  transition: opacity ease .5s;
}
 

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