Tablón con "pestaña" que aparece al poner el ratón encima.

Pido perdón por no poner un buen título, pero es que no sé cómo llamarlo. Bueno la cosa es que estoy teniendo muchos problemas con un tablón de pestañas y, realmente, no quiero complicarme la vida... Entonces, mi pregunta y gran duda es...

¿Se puede poner una imagen en la cual, al pasar el cursor por encima, se despliegue y deje ver algo oculto en su interior? Obviamente, al quitar el cursor de la imagen, esta se volvería a cerrar.


Espero haberme explicado bien. ¡Gracias!

Pues claro que sí, se puede hacer, básicamente, con un :hover o con Js, si tienes acceso a este. ¿Necesitas que te creemos un código? Aún así, si me explicas qué quieres decir exactamente con "desplegar" (de arriba a bajo, de abajo a arriba, que se despliegue deslizándose, etc) nos facilitarás mucho el trabajo
Muevo al área de soporte de programación

Se desplegaría hacia abajo, como tienen el tablón en este foro : http://skipping-stone.foros-phpbb.es/ , pinchas en awards y se despliegan hacia abajo

Esto lo he utilizado para un tema de relaciones en uno de mis foros. Le he cambiado colores y alguna otra cosa para que más o menos lo entiendas. La clase "rosa" es la del nombre (osea, donde quieres que al pasar el ratón enseñe el resto". El blanco es donde iría el contenido, la cajita, vamos. Y el morado es donde he colocado la imagen. Tendrías que modificar tamaños y ponerlo a tu gusto.

Código:

<div class="contenido"><div class="rosa">NOMBRE APELLIDO</div><div class="blanco"><div class="morado"><img src="http://i70.photobucket.com/albums/i84/dark_tsukiyomi/tatsuya_zps824bb782.jpg" alt="[image] " title="[image] " border="0"></div></div></div>

<style type="text/css"> .contenido {height: 60px; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; transition: 1s ease-in-out; overflow: hidden;} .contenido:hover {height: 200px; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; transition: 1s ease-in-out;} .morado {background-color:#60F; padding: 5px; height: 100px; width: 100px; margin-bottom: 5px;} .rosa {width: 125px; background-color:#F3C; font-size: 13px; font-family: calibri; color: #fff; letter-spacing: 3px; text-align: center; height: 30px; padding-top: 15px; padding-left: 5px; padding-right: 5px;  padding-bottom: 15px;padding-bottom: 15px;} .blanco {background-color: #fff; height: 235px; margin-top: 5px; padding: 10px; width: 110px;} </style>

Si te interesa tener un código base para hacer desde cero tú tus cosas puedes probar con esto:

CSS

Código:

#miCosa h6 + div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}
      
#miCosa:hover h6 + div {
    max-height: 9999px;
}

HTML

Código:

<div id="miCosa">
    <h6>Pasa el ratón</h6>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

Lo único que te debería interesar cambiar en el código es el tiempo que tardará el efecto en finalizar (0.5s). El resto debes dejarlo como está, pues es un código base y si quitas cualquiera de las propiedades CSS ya no funcionará.

Ya lo tengo, mil gracias Yuna! Me has salvado la vida. Puedes ver los créditos debajo del tablón: http://hornofplenty.foroactivo.com/

Gracias Bret, aprenderé a hacerlo para las próximas veces *-*