Iconos sociales en blanco y negro que cambian a color con transicion vertical

Vamos a ver otra manera original de mostrar los llamados iconos sociales. Estan confeccionados con CSS3 añadiendole la propiedad 'transition', que le dan un efecto de animacion muy atractiva. En realidad solo contiene una imagen PNG en la que estan los ocho iconos (lo que se le llama un sprite), que al pasar el cursor cambian de blanco y negro a color, bajando hacia abajo y luego volviendo a su posicion inicial. Como veis, he puesto los 4 iconos mas importantes del momento: el feed, Google Plus, Facebook y Twitter. Si solo quereis mostrar uno, dos o tres, tan solo teneis que borrar la linea correspondiente. Para ponerlo en vuestro blog (lo ideal seria en la sidebar), tan solo teneis que copiar el codigo de abajo y pegarlo en un gadget HTML, añadiendo las urls de vuestras cuentas donde esta indicado en color azul.

CODIGO

<center><table style="width:240px;"><tbody><tr><td><div class="iconosbncolor"><a class="rss" href="URL FEED" target="_blank"></a><a class="googleplus" href="URL GOOGLE+" target="_blank"></a><a class="facebook" href="URL FACEBOOK" target="_blank"></a><a class="twitter" href="URL TWITTER" target="_blank"></a></div></td></tr></tbody></table></center>
<style>
    .iconosbncolor a {
    display:block;
    height:50px;
    width:50px;
    padding:0 4px;
    float:left;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgICq5wMR1nGAuOW0wICDvU1hLyUxysk9LiaFkjoAJEg0VzJb_P4C1Fq57PNDFRsqFXjhB8H1LspRnRD3AVMCO39xigE5atXHq39i4ZzhvVL9UCFaH8IdN_VmKjl6veglGcV_zQCxsdHb0/s454/sociales%2520color-bn%2520-%2520REDEANDO.png) no-repeat;
    -webkit-transition: ease-in 0.2s all;
    -moz-transition: ease-in 0.2s all;
    -o-transition: ease-in 0.2s all;
    -ms-transition: ease-in 0.2s all;
    transition: ease-in 0.2s all;
    cursor:pointer;

    }

    .iconosbncolor a.googleplus {
    background-position: 0px -58px;

    }
    .iconosbncolor a.googleplus:hover {
    background-position: 0px 0px;
    }

    .iconosbncolor a.twitter {
    background-position: 0px -290px;

    }
    .iconosbncolor a.twitter:hover {
    background-position: 0px -232px;

    }
    .iconosbncolor a.facebook {
    background-position: 0px -406px;

    }
    .iconosbncolor a.facebook:hover {
    background-position: 0px -348px;

    }
    .iconosbncolor a.rss {
    background-position: 0px -174px;

    }
    .iconosbncolor a.rss:hover {
    background-position: 0px -116px;

    }
</style>