Como adicionar efeitos animados a ícones em um widget de texto?

Willy · 02/12/2012

Hola amigos y amigas,

Necesito un poco de luz, verán, tengo editado en la caja de "Texto" del Widget el siguiente código:

<a href="http://twitter.com/miurl" target="_blank"><img src="http://miblog/wp-content/uploads/twitter.png" alt="" title="Sígueme en Twitter" width="48" height="48" class="alignnone size-full wp-image-31" /></a>

<a href="miblog/wp-content/uploads/flickr.png"><img src="miblog/wp-content/uploads/flickr.png" alt="" title="Sígueme en Flickr" width="48" height="48" class="alignnone size-full wp-image-33" /></a>

Como bien saben, con esto, sencillamente abre la página de twitter o flickr con clickear sobre uno de los iconos como se muestra en la captura de la imagen. Me gustaría saber cómo puedo lograr un pequeño efecto animado sobre los iconos, por ejemplo, al hacer click se mueva el icono un poco hacia arriba o haga el efecto de hundimiento...en todo caso, cualquier efecto sencillo me valdría para darle un elemento más impactante.

P.S. Espero no haberme equivocado de sección.

Con mi agradecimiento anticipado...

Saludos.

qcdar · 02/12/2012

Willy disse:
Hola amigos y amigas,

Necesito un poco de luz, verán, tengo editado en la caja de "Texto" del Widget el siguiente código:

Como bien saben, con esto, sencillamente abre la página de twitter o flickr con clickear sobre uno de los iconos como se muestra en la captura de la imagen. Me gustaría saber cómo puedo lograr un pequeño efecto animado sobre los iconos, por ejemplo, al hacer click se mueva el icono un poco hacia arriba o haga el efecto de hundimiento...en todo caso, cualquier efecto sencillo me valdría para darle un elemento más impactante.

P.S. Espero no haberme equivocado de sección.

Con mi agradecimiento anticipado...

Saludos.

Seria importante pongas el contenido de la clase que tienes alignnone size-full wp-image-31

Seguro debes agregar al css una clase alignnone:hover y agregarle codigo para sombra

ecoal95 · 02/12/2012

HTML:

<a href="http://twitter.com/miurl" target="_blank" class="social-icon"><img src="http://miblog/wp-content/uploads/twitter.png" alt="Sígueme en Twitter" title="Sígueme en Twitter" width="48" height="48" class="alignnone size-full wp-image-31" /></a>

<a href="miblog/wp-content/uploads/flickr.png" class="social-icon"><img src="miblog/wp-content/uploads/flickr.png" alt="Sígueme en Flickr" title="Sígueme en Flickr" width="48" height="48" class="alignnone size-full wp-image-33" /></a>

CSS:

Inserir CODE, HTML ou PHP:

.social-icon {
    position: relative;
    bottom: 0;
    -webkit-transition: bottom .6s;
    -moz-transition: bottom .6s;
    -ms-transition: bottom .6s;
    -o-transition: bottom .6s;
    transition: bottom .6s;
}
.social-icon:hover {
    bottom: 10px;
}

Willy · 02/12/2012

Gracias qcdar por su atenta respuesta. He aplicado la receta de nuestro amigo ecoal95 y funciona perfectamente.

Le agradezco mucho haberme facilitado el método CSS, amigo ecoal95. Le agradezco nuevamente su apoyo y le reitero en todo lo que vale y para mi representa. GRACIAS.

Mis mejores saludos ...y un abrazo.

qcdar · 02/12/2012

Willy disse:
Gracias qcdar por su atenta respuesta. He aplicado la receta de nuestro amigo ecoal95 y funciona perfectamente.

Le agradezco mucho haberme facilitado el método CSS, amigo ecoal95. Le agradezco nuevamente su apoyo y le reitero en todo lo que vale y para mi representa. GRACIAS.

Mis mejores saludos ...y un abrazo.

Podrías agrear algo de sombra igual

PHP:

.social-icon:hover {
    bottom: 10px;
   -webkit-box-shadow: 0px 0px 3px 0px ;
    box-shadow: 0px 0px 3px 0px ; 
}