CSS sprites for social media icons

So here is my website: https://simplythreetrio.com

I would like to change my current social media icons (top right) to CSS sprites, so that hovering turns them blue. I made my sprites, and they are here:

https://simplythreetrio.com/wp-content/uploads/2012/10/twitter_sprite.png
https://simplythreetrio.com/wp-content/uploads/2012/10/facebook_sprite.png
https://simplythreetrio.com/wp-content/uploads/2012/10/rss_sprite.png
https://simplythreetrio.com/wp-content/uploads/2012/10/youtube_sprite.png

I just don’t know how to insert the proper code into the php file, nor the css file. I would love some help, please!

Here is my social_profiles.php file:

<?php
    new Themater_Social_Profiles();

    class Themater_Social_Profiles
    {
        var $theme;
        var $status = false;
        var $display_networks = false;
        var $url;

        var $defaults;

        function __construct()
        {
            global $theme;
            $this->theme = $theme;
            $this->url = THEMATER_INCLUDES_URL . '/social_profiles';

           $this->defaults = array(
                'hook' => 'social_profiles',
                'networks' => array(
                    array('title' => 'Twitter', 'url' => 'https://twitter.com/', 'button' => get_template_directory_uri() . '/images/social-profiles/twitter.png'),
                    array('title' => 'Facebook', 'url' => 'https://facebook.com/', 'button' => get_template_directory_uri() . '/images/social-profiles/facebook.png'),
                    array('title' => 'Google Plus', 'url' => 'https://plus.google.com/', 'button' => get_template_directory_uri() . '/images/social-profiles/gplus.png'),
                    array('title' => 'LinkedIn', 'url' => 'https://www.linkedin.com/', 'button' => get_template_directory_uri() . '/images/social-profiles/linkedin.png'),
                    array('title' => 'RSS Feed', 'url' => $theme->rss_url(), 'button' => get_template_directory_uri() . '/images/social-profiles/rss.png'),
                    array('title' => 'Email', 'url' => 'mailto:[email protected]', 'button' => get_template_directory_uri() . '/images/social-profiles/email.png')
                )
            );

            if(is_array($this->theme->options['plugins_options']['social_profiles']) ) {
                $this->defaults = array_merge($this->defaults, $this->theme->options['plugins_options']['social_profiles']);
            }

            $this->theme->add_hook($this->defaults['hook'], array(&$this, 'display_social_profiles'), 1);

            if($this->theme->is_admin_user()) {
               $this->themater_options();
            }
        }

        function display_social_profiles()
        {
            $widget_name = 'ThematerSocialProfiles';
            $args = array('before_widget' => '','after_widget' => '');
            $get_instance = $this->theme->get_option('themater_social_profiles_networks');
            $instance = array('profiles' => $get_instance);
            the_widget($widget_name, $instance, $args);
        }

        function get_widget_form()
        {
            $widget_name = 'ThematerSocialProfiles';
            $run_widget = new $widget_name();
            $run_widget->id_base = 'plugin';
            $get_instance = $this->theme->get_option('themater_social_profiles_networks');
            $instance = array('profiles' => $get_instance);
            $run_widget->form($instance);
            ?>
            <script>
    			  var update_scial_content = $thematerjQ('.themater_social_profiles_widget').html();
    			  update_scial_content = update_scial_content.replace(/widget-plugin\[\]\[profiles\]/g, 'themater_social_profiles_networks');
    			  $thematerjQ('.themater_social_profiles_widget').html(update_scial_content);
    			  $thematerjQ('.themater_social_profiles_widget_title').hide();
    		  </script>
            <?php
        }

        function themater_options()
        {

            $this->theme->admin_option(array('Social Profiles', 16),
                'Social Profiles' , 'social_profiles',
                'content', 'Add buttons to your social network profiles.'
            );

            $this->theme->admin_option('Social Profiles',
                'Networks', 'themater_social_profiles_networks',
                'callback', $this->defaults['networks'],
                array('callback' => array(&$this, 'themater_social_profiles_networks'), 'display' => 'clean')
            );

        }

        function themater_social_profiles_networks()
        {
            $this->get_widget_form();
        }
    }
?>

Here is the current corresponding CSS. I’ll include the whole header:

/* =HEADER
-------------------------------------------------------------- */

#header {
    height: 0px;
    padding:0px 0;
}

.logo {
    float: left;
    margin: -65px 0px 0px -10px;
padding: 0px 25px;
}

.logo h1.site_title {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:48px;
    line-height: 40px;
    font-weight: bold;
}

.logo h1.site_title a, .logo h1.site_title a:hover {
    color: #47a0eb;
    text-decoration: none;
}

.logo h2.site_description {
    margin: 0;
    padding:0;
    color: #47a0eb;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    line-height: 14px;
}

.header-right {
    float: right;
}

#top-social-profiles {
    padding-top: 10px;
    padding-right: 15px;
    height: 32px;
    text-align: right;

}
#top-social-profiles img {
    margin: 0 0 0 6px !important;
} 

#top-social-profiles img:hover {
    opacity: 0.8;

}
#top-social-profiles .widget-container {
  background: none;
  padding: 0;
  border: 0;
}

If there is any help/advice you can give me in order to achieve this CSS sprite replacement, I would truly appreciate it!!

-Zack