Efecto animado para iconos con widget

[Simeone1]

Hola amig@s, ¡Feliz fin de semana!

A ver si pueden arrojarme un poco de luz, verán, tengo editado con widget en la pestaña "Texto" 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 saben, clickeando sobre unos de los iconos como se muestra en la captura de imagen (de la barra lateral), sencillamente abre la página de twitter o flickr. Me gustaría saber cómo puedo lograr un pequeño efecto animado sobre los iconos, por ejemplo, que al hacer click se mueva el icono o haga el efecto de hundimiento... cualquier efecto sencillo me valdría para darle un elemento más impactante.



Muchas gracias...

Un abrazo.

[ArturoGallegos]

si deseas que se mueva un poco a la derecha o izquierda con CSS puedes mover el margen,

si quieres el efecto de que se haga opaco o de hundimiento necesitas crear las imágenes correspondientes y en lugar de poner la imagen directamente ponla como background, ya estando como background en CSS puedes cambiar la imagen con el evento hover o focus

[Simeone1]

Apreciado Ag666, agradezco en todo lo que vale y para mi representa tu tiempo y apoyo. GRACIAS.

Amigo Ag, en este caso, me encantaría que se moviera un poco "arriba". No entiendo mucho de CSS. No he comprendido bien lo de mover con CSS el margen. No sé si te refieres con añadir una línea de código dentro de la caja de "Texto" de Widget (?). Como podrás observar, es ahí donde tengo editado los iconos y la URL.

Saludos.

[ArturoGallegos]

ok que se mueva para arriba, vamos a probar si lo que estoy imaginando es lo que quieres

en tu hoja de estilos del theme o del plugin agrega

Código CSS:

.wp-image-31:hover{margin-top:-5px;}
 

eso hará que al pasar el mouse sobre el icono suba 5px hacia arriba.

[Simeone1]

Gracias mil, amigo.

He copiado el código en la hoja de estilo como me indicaste (al final de la página): .wp-image-31:hover{margin-top:-5px;} Pero no me ha funcionado. Los iconos siguen siendo estáticos. No sé si es mejor editarlo en el archivo Custom.css. Aunque también lo he probado ahí y no resultan los cambios. No sé si habrá alguna otra manera de intentarlo, si no te resulta demasiado pesado.

Muchas GRACIAS.