Tengo un panel que muestra un fragmento de texto. Quiero poder pasar el mouse sobre el panel y que muestre texto nuevo. El problema que tengo es que el texto flotante que quiero mostrar hace que el panel sea más grande de lo que quiero que sea.

En pocas palabras, el panel debería verse como un panel completamente nuevo cuando se coloca sobre él, es decir, un color diferente con texto diferente.

Encontré este jsFiddle de ejemplo que alguien publicó, que es esencialmente lo que quiero lograr, pero no estoy usando una imagen debajo. http://jsfiddle.net/xsFmA/345/

Aquí está mi ejemplo jsFiddle:

.h2 {
  font-size: 30px;
}

.class-type-item {
	position: relative;	
	margin: 20px;
	text-align:center;
	padding:70px;
	background-color:black;
    color:grey;
}

.hover-text {
    text-align: center;
    opacity: 0;
    position: relative;
	color:black;
}

.class-type-item:hover {
	background-color:#AD1515;
}

.class-type-item:hover p {
    opacity:1;
    float:left;
}

.class-type-item:hover h2 {
    opacity:0;
}
<div class="row-fluid">
    <div class="col-md-6">
        <div class="class-type-item" >
            <h2>Yoga Classes</h2>
            <p class="hover-text">description goes here </p>
        </div>
    </div>
</div>

Parece que solo puedo encontrar ejemplos usando imágenes. ¡Cualquier ayuda o consejo sería de gran ayuda! ¡Gracias!

0
Aimee Jones 22 ene. 2015 a las 02:44

3 respuestas

La mejor respuesta

Configure height y width de su contenedor class-type-item y los dos paneles h2 y p a los mismos valores. Digamos height: 100px y width: 150px;

.class-type-item,
h2,
p {
    height: 100px;
    width: 150px;
}

Luego agregue position: absolute a los paneles. Entonces colóquelos uno encima del otro dentro del contenedor. No es necesario float: left.

h2,
p {
    position: absolute;
    top: 0;
    left: 0;
}
1
philipb3 22 ene. 2015 a las 01:20

¿Por qué no establecer una altura para el div contenedor "class-type-item"?

0
John23 21 ene. 2015 a las 23:53

El código que está cambiando el tamaño del div es este:

.class-type-item:hover p {
    float:left;
}

Quite el flotador: se deja en hover, y el div permanecerá del mismo tamaño en hover.

1
EricBellDesigns 21 ene. 2015 a las 23:51