Calificación:
  • 1 voto(s) - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[Mini-Mod] Efecto transición y movimiento en imagenes y avatares
#1
Saludos para todos

En un post ...

[Imagen: hZuKQ.gif]

En el perfil...

[Imagen: Nszks.gif]

Ahora si comencemos:
Buscan en estilo.css lo siguiente:


Cita:.temaBubble .avatar{
width: 100px;
height: 100px;
border-bottom: 1px solid #FFF;
display: inline;
}

Abajo de eso encuentran .avatar { ahí reemplazan todo por esto.

Cita:.avatar {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
display: block;
margin: auto;
padding: 2px;
width: 120px;
-webkit-transform: rotate(-5deg);
box-shadow: 0px 0px 5px 0px black;
border-radius: 10px;
display: block!important;
-webkit-transition: -webkit-transform 0.5s;
margin-left: px;
}
.avatar:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.avatar:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

Luego Buscan en el mismo archivo estilo.css lo siguiente:

Cita:.perfil-avatar img {
background-color: #FFFFFF;
border: 4px solid white;
height: 120px;
padding: 1px;
width: 120px;
}

Lo reemplazan por esto:

Cita:.perfil-avatar img {
background-color: #FFFFFF;
border: 4px solid white;
height: 120px;
padding: 1px;
width: 120px;
-webkit-transform: rotate(-3deg);
box-shadow: 0px 0px 10px 0px black;
border-radius: 10px;
display: block!important;
-webkit-transition: -webkit-transform 0.5s;
margin-left: 2px;
}
.perfil-avatar img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

Por último buscan en el mismo archivo estilo.css

Cita:a img {
border: 0;
}

y justo abajo ponen esto:

Cita:a img:hover {
opacity: .6;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.9s ease;
-o-transition: all 0.3s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

Eso es todo espero les guste y denme reputacion si les sirvio
#2
O_o jajaja postearon el mini-Mod que publique en phpost... Gran sonrisa
[Imagen: 5z4em.png]
Guía Panel Clientes ☼   ☼ WIKI ☼   ☼  DNS SKYLIUM ☼   ☼ NORMAS  ☼   ☼ PLANES HOSTING




WWW
#3
jaja buenisimo lo voy a usar, muchas gracias por el aporte aunque no es tuyo XD
#4
muy Bueno estas Bien desarrollado este mod felicidades quien lo creo
#5
lindos códigos, me los llevo Gracias por el aporte. Guiño
[Imagen: qkoii.png]
#6
Mucho css, lo que cargaría un poco la web, pero se ven muy lindos, gracias a @romeho que lo aporto primero en phpost, fui testigo
#7
Gracias buen aporte xD Gran sonrisa de verdad me ayudara mucho...
WWW
#8
gracias si se pudo
http://minux.gtphost.com/ dejo la web para que veas
#9
¡Buenisimo! A ponerlo en mi web Gran sonrisa
#10
Buen aporte, aunque este MOD me sale muy mal en mi theme Triste
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Solucionado: No se ven las imagenes de los post LautaroSanchez 5 183 29-06-2018, 06:01 PM
Último mensaje: Vicen
  [Mini-Mod][SEO]Descripcion al crear post... casper 2 747 16-12-2014, 01:24 PM
Último mensaje: Vicen
  PHPOST [Mini Mod] Entrar al perfil desde http://TuWeb/USUARIO/ casper 0 513 04-10-2014, 09:49 PM
Último mensaje: casper
  [Mini MOD] Links ocultos para visitantes LCNetwork 8 1,201 24-08-2014, 12:41 PM
Último mensaje: TheBomberbe
  PHPOST [Mini MOD] Anti AdBlock LCNetwork 4 975 13-08-2014, 04:24 PM
Último mensaje: Vicen
  PHPOST Mini fix Imagen "Cargando..." Al Agregar Post Boreas 18 2,039 13-08-2014, 02:32 PM
Último mensaje: albert2227
  [Mini MOD] Scrollbar Path Style Scroll LCNetwork 2 572 04-08-2014, 09:27 PM
Último mensaje: Renguit0
  [Mini MOD]Top User con más Posts LCNetwork 4 629 01-07-2014, 03:22 PM
Último mensaje: Vicen
  [Mini-MOD]Header con movimiento LCNetwork 2 661 30-06-2014, 10:30 PM
Último mensaje: mispracticas2009
  [Mini MOD] Hover en imagen de perfil LCNetwork 0 452 21-06-2014, 05:17 AM
Último mensaje: LCNetwork



Usuarios navegando en este tema: 1 invitado(s)