Avatar en movimiento al pasar el ratón ó mostrar información adicional.
Hola a todos/as hacia tiempo que no me pasaba por aquí, quería comentaros si alguien sabe de algún plugin o tuto donde te explique que hacer para con...

Hola a todos/as hacia tiempo que no me pasaba por aquí, quería comentaros si alguien sabe de algún plugin o tuto donde te explique que hacer para conseguir que el avatar gire o muestre campos ocultos en el perfil del postbit al pasar el ratón por el. Lo he visto por ahí en algún foro y he intentado buscar algún tutorial por aquí pero no he encontrado nada.

Un Saludo
Heart
Última modificación: 12 Oct, 2012, 11:46 am por surwarez.
mmm podría hacerse con CSS, primero crear tu clase donde ira el avatar:

Ej.
Código PHP:
.postbit_avatar img{
    
CÓDIGOS AQUÍ MAS LO DE ABAJO
    
-moz-transitionall 0.5s ease-in-out;
    -
webkit-transitionall 0.5s ease-in-out;
    
transitionall 0.5s ease-in-out;


Luego le agregas la 'función hover' (Si es que se llama así..) y pones esto:

Código PHP:
.postbit_avatar img:hover {
    -
moz-transformrotate(360degscale(1);
    -
webkit-transformrotate(360degscale(1);
    
transformrotate(360degscale(1);
    
opacity1;
    
filteralpha(opacity=100);


Ya luego lo llamas en algún div:

Código PHP:
<div class="postbit_avatar">
    <
img src="RUTA DEL AVATAR">
</
div

Lo de hacer aparecer otros campos ocultos al hacer hover.. mm podrías buscar con jQuery, no lo tengo muy claro.
Asi es como lo he puesto, pero no hace nada, :S

Código PHP:
.postbit-avatar {
        -
moz-border-radius5px;
        -
webkit-border-radius5px;
        
border-radius5px
        background
-color#DDDDDD;
        
border1px solid #BEBEBE;
        
padding4px;
      -
moz-transitionall 0.5s ease-in-out;
      -
webkit-transitionall 0.5s ease-in-out;
       
transitionall 0.5s ease-in-out;
}

.
postbit-avatar:hover {
        -
webkit-transitionall 250ms ease-in-out;
        -
moz-transitionall 250ms ease-in-out;
        -
o-transitionall 250ms ease-in-out;
        
transitionall 250ms ease-in-out;
        -
webkit-box-shadow0px 0px 7px 0px rgba(0000.3);
        -
moz-box-shadow0px 0px 7px 0px rgba(0000.3);
        
box-shadow0px 0px 7px 0px rgba(0000.3);
       -
moz-transformrotate(360degscale(1);
       -
webkit-transformrotate(360degscale(1);
       
transformrotate(360degscale(1);
       
opacity1;
      
filteralpha(opacity=100);


Saludos.
Última modificación: 12 Oct, 2012, 4:04 pm por surwarez.
Porque le quitaste el img? Si por algo lo puse así.
Da igual, ya lo he conseguido, solo tenia que agregar esto al CSS del hover:

Código PHP:
-webkit-transition1s;
-
webkit-transformrotate3d(0,0,0360deg); 

Gracias por el cable.
Saludos
Última modificación: 12 Oct, 2012, 4:22 pm por surwarez.
Si lo puse con img, toma solo el tag <img> que este dentro del div postbit-avatar, así evitas que otras cosas también 'giren'.

Pero bueno.. marco y cierro.