efecto al pasar el mouse sobre una imagen (hover)

[iniciopublic]

Hola a todos , es que tengo una duda , si ustedes me podrian dar una pista , quisiera saber como hago el al pasar el mouse a una imagen aparezca un div flotante ( en mi caso en el div pondre las descripciones de la imagen)

por ejemplo asi :



¿se puede hacer en css?

[Alexis88]

Claro, de esta forma:

Código CSS:

#miImagen:hover ~ #miDiv{
    display: block;
}
 

Saludos

[iniciopublic]

Iniciado por Alexis88

Claro, de esta forma:

Código CSS:

#miImagen:hover ~ #miDiv{
    display: block;
}
 

Saludos

gracias pero podrias ponerlo un poco mas amplio?

[Alexis88]

Supongamos que en el documento HTML, tenemos una imagen cualquiera con un id "miImagen" y un Div con un id "miDiv":

Código HTML:

<img src = "imagen.jpg" id = "miImagen" />
<div id = "miDiv">CONTENIDO</div>
 

En la hoja de estilos, ocultamos el Div de id "miDiv" y cuando posemos el cursor del mouse sobre la imagen de id "miImagen", se mostrará el Div de id "miDiv":

Código CSS:

#miDiv{
    display: none;
}
 
#miImagen:hover ~ #miDiv{
    display: block;
}
 

La virgulilla de la Ñ, indica que los estilos a continuación, se aplicarán al elemento indicado a la derecha.

Este ejemplo en ejecución: http://jsbin.com/UWIcIPeD/1

Aplicando más propiedades CSS, puedes darle la apariencia que deseas.

Saludos

[pzin]

Yo creo que estructuralmente convendría hacer algo más robusto como:

Código HTML:

<div class="pelicula">
  <span>Cuestión de Tiempo</span>
  <img src="peli.png">
  <div class="sinopsis">
    Bla bla
  </div>
</div>
 

Y luego ya trabajas con una posición relativa y absoluta:

Código CSS:

div.pelicula {
  position: relative;
}
 
div.sinopsis {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  display: none;
}
 
div.pelicula:hover div.sinopsis {
  display: block;
}