Avatar en movimiento al pasar el ratón ó mostrar información adicional.

Bewan 12 Oct, 2012, 11:44 am

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.

HSSWebs 12 Oct, 2012, 2:25 pm

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

Ej.

Código PHP:
<?php 

.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;

}

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

Código PHP:
<?php 

.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);

}

Ya luego lo llamas en algún div:

Código PHP:
<?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.

<?php .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); }