Boton DIV / CSS desplegable.

[BREIQ]

Hola de nuevo a todos. Me gustaria saber de su sabiduria n_n

Realmente lo que quiero dudo sea tan dificil, pero eh visto que se puede con CSS y la verdad aun no lo domino del todo. La mayor parte lo hace dream.

Lo que nesecito es esto.

Un boton. que sea un div con una imagen,

[imagen]

Pero al poner el cursor encima se expanda el contenedor (como si fuera un menu desplegable) pero no sub menus, si no el mismo boton para que se aprecie la misma imagen pero completa. y la transicion sea animada.

[imagen]
[imagen]

La idea es que cambie el tamaño del div y se aprecie completa la imagen de fondo.
pero tiene otros botones arriba y abajo y al cambiar de tamaño estos floten con el cambio.

[boton]
[boton desplegado]
[boton desplegado]
[boton]

Espero su ayuda, muchas gracias n_n

[Naahuel]

¿Algo así?

Código CSS:

.button{
    /* Debe tener especificadas las dimensiones
    para poder animarlas */
    width: 100px;
    height: 50px;
    
    background: url(http://placekitten.com/100/100) center center no-repeat;
    cursor: pointer;
    
    /* Definir transiciones */
     -webkit-transition-property:height, line-height;  
     -webkit-transition-duration: 0.3s;  
     -webkit-transition-timing-function: linear; 
        
     -moz-transition-property:height, line-height;  
     -moz-transition-duration: 0.3s;  
     -moz-transition-timing-function: linear; 
     
     transition-property:height, line-height;  
     transition-duration: 0.3s;  
     transition-timing-function: linear; 
    
    /* Estilos adicionales */
    color:#FFF;
    font-size: 22px;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 50px; /* Igual que la altura para centrar verticalmente */
    text-align: center;
    border-radius: 6px;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.5);
    border: 1px solid #EEE;
}
 
.button:hover{
    height: 80px;
    line-height: 80px;
}
 

Código HTML:

<div class="button">
    Botón
</div>
 

[BREIQ]

Muchas gracias...exactamente eso era lo que buscaba. Aun que en IE no se anima y tiene en medio una linea del link funciona muy bien. Gracias n_n

[gmonterog]

En IE no se anima porque IE no es compatible con las transiciones CSS. Funcionará, pero con un cambio brusco.

Sdos.

GMG.