[SOLUCIONADO] Display div on hover

[ivanalberquilla]

Hola,

Quiero hacer un efecto caption en una imagen, de forma que cuando pases el cursor sobre la imagen se muestre un texto en la parte de abajo.

Para ello muestro una estructura de la forma

Código HTML:

<div class="imagen">
<div class="contenido">
 

Sin pasar el raton cambio la posicion del div contenido y le pongo display:none

Código CSS:

.contenido{
    position: relative;
    top: -130px;
    display: none;
}
 

on hover

Código CSS:

#views-bootstrap-grid-1:HOVER .contenido{
    top: -60px;
    height: 60px;
    z-index: 100;
    display: inline;
}
 

El caso es que al pasar el ratón por encima se me muestra en la posición que yo quiero, pero me también me muestra la posición donde debería estar en el flujo normal del html su posición en blanco. Es decir, se muestra desplazado con la posición que doy en el top, pero además me muestra la posición que debería ocupar sin el desplazamiento.

¿Como puedo hacer que la posición normal del flujo html sin el relative no se muestre?

Muchas gracias

[pzin]

Usa highlight cuando publiques código.

Y cuando publiques código deja claro cómo es ese código, porque esto:

Código HTML:

<div class="imagen">
<div class="contenido">
 

Yo no entiendo bien si es:

Código HTML:

<div class="imagen"></div>
<div class="contenido"></div>
 

O bien:

Código HTML:

<div class="imagen">
  <div class="contenido"></div>
</div>
 

Una detalle bastante importante.

Respecto a la duda, es el comportamiento habitual de una posición relativa, ya que sólo mueve el contenido relativamente a su posición dentro del flujo del HTML sin que esta se pierda y por lo tanto siga ahí.

Si el texto (la clase .contenido) está dentro de la imagen (.imagen), cosa que no quedó clara por aquello de no publicar las etiquetas de cierre correspondientes, entonces lo ideal sería aplicar una posición relativa al contenedor y una absoluta al texto:

Código CSS:

div.imagen {
  position: relative;
}
 
div.contenido {
  position: absolute;
}
 

Y ya ajustas con top, right, bottom y left donde quieres que aparezca en relación a la imagen.

[ivanalberquilla]

Hola,

Perdón por los fallos al publicar el mensaje. Los divs imagen y contenido están a la misma altura, no uno dentro de otro.

Ya he arreglado el problema de posicionamiento con margin-top.

El problema ahora es que al posicionarse encima de la imagen se pierde el background-color.

La imagen tiene un z-index menor que el texto con color de fondo. ¿Porque se va el color?

Gracias
Un saludo

[pzin]

No sé si es el mismo problema que tuve hace algunos años. Si es eso, entonces las soluciones están en ese hilo: [1] y [2].

Qué títulos tan descriptivos los míos.

[ivanalberquilla]

Hola Pzin,

Pues parece que tenemos un nuevo caso de z-index alcoholizado.

Pero por lo que veo en las soluciones, ¿pasaba por hacer un posicionamiento relativo en ambos?

Sigue sin cogermelo, tengo el ejemplo aquí [URL="http://desasubas.hol.es/catalogo"]AQUÍ[/URL] es el div azul discreto, no se si será el mismo caso

Muchas gracias

[pzin]

Pues no era el mismo caso no. El tuyo es una cuestión más mundana.

Estás especificando que al altura del elemento sea cero:

Código CSS:

#views-bootstrap-grid-1 .col-lg-4:HOVER .views-field-field-categor-a {
  height: 0px;
  [...]
}
 

Si la altura es cero, obviamente no se verá el fondo.

Más allá de eso, estás complicando mucho ese efecto. Como te decía en el post de arriba, es más fácil, limpio y robusto tener un elemento con posición absoluta.

Lo básico sería:

Código CSS:

div.contenedor {
  position: relative;
}
 
div.efecto {
  position: absolute;
  visibility: hidden;
}
 
div.contenedor:hover div.efecto {
  visibility: visible;
}
 

Luego también puedes animarlo para que salga moviéndose desde abajo usando transition.

[ivanalberquilla]

Hola,

Si mucho mas sencillo como me dices, así queda mejor

Muchas gracias