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

mmm podría hacerse con CSS, primero crear tu clase donde ira el avatar:

Ej.

.postbit_avatar img{
    CÓDIGOS AQUÍ MAS LO DE ABAJO
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

PHP

Select All

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

.postbit_avatar img:hover {
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    opacity: 1;
    filter: alpha(opacity=100);
}

PHP

Select All

Ya luego lo llamas en algún div:

<div class="postbit_avatar">
    <img src="RUTA DEL AVATAR">
</div>

PHP

Select All

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

.postbit-avatar {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px
        background-color: #DDDDDD;
        border: 1px solid #BEBEBE;
        padding: 4px;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
       transition: all 0.5s ease-in-out;
}

.postbit-avatar:hover {
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
        -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
       -moz-transform: rotate(360deg) scale(1);
       -webkit-transform: rotate(360deg) scale(1);
       transform: rotate(360deg) scale(1);
       opacity: 1;
      filter: alpha(opacity=100);
}	

PHP

Select All

Saludos.

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:

-webkit-transition: 1s;
-webkit-transform: rotate3d(0,0,0, 360deg);

PHP

Select All

Gracias por el cable.
Saludos

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.