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 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
Un Saludo
mmm podría hacerse con CSS, primero crear tu clase donde ira el avatar:
Ej.
Luego le agregas la 'función hover' (Si es que se llama así..) y pones esto:
Ya luego lo llamas en algún div:
Lo de hacer aparecer otros campos ocultos al hacer hover.. mm podrías buscar con jQuery, no lo tengo muy claro.
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;
}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);
}Ya luego lo llamas en algún div:
<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
Saludos.
.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);
} 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:
Gracias por el cable.
Saludos
-webkit-transition: 1s;
-webkit-transform: rotate3d(0,0,0, 360deg);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.
Pero bueno.. marco y cierro.