<ul class="social-buttons">
        <li><a href="https://twitter.com/" class="twitter" title="Follow us on Twitter"><span class="image"></span></a></li>
        <li><a href="https://www.facebook.com/" class="facebook" title="Like our Facebook page"><span class="image"></span></a></li>
        <li><a href="http://www.flickr.com/" class="flickr" title="Follow us on Flickr"><span class="image"></span></a></li>
        <li><a href="https://www.youtube.com/" class="youtube" title="View our videos on YouTube"><span class="image"></span></a></li>
        <li><a href="https://www.vimeo.com/" class="vimeo" title="View our videos on Vimeo"><span class="image"></span></a></li>
        <li><a href="https://www.pinterest.com/" class="pinterest" title="Repin our images"><span class="image"></span></a></li>
    </ul>

  .social-buttons li {list-style-type: none; float:left; padding-left: 16px; margin: 0 0 -20px 0;}

  .facebook, .twitter, .flickr, .youtube, .vimeo, .pinterest {display: inline-block; background: url(https://www2.hull.ac.uk/pws4/templates/default/newCSS/img/social.png) no-repeat; position: relative; width: 32px; height: 32px;}

  .facebook span.image, .twitter span.image, .flickr span.image, .youtube span.image, .vimeo span.image, .pinterest span.image {position: absolute; background: url(https://www2.hull.ac.uk/pws4/templates/default/newCSS/img/social.png) no-repeat; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s;} 

  .facebook:hover span.image, .twitter:hover span.image, .flickr:hover span.image, .youtube:hover span.image, .vimeo:hover span.image, .pinterest:hover span.image {opacity: 1;} 
  

  .facebook   {background-position: 0 -32px;}
  .twitter    {background-position: -32px -32px;}
  .flickr     {background-position: -64px -32px;}
  .youtube    {background-position: -96px -32px;}
  .vimeo      {background-position: -128px -32px;}
  .pinterest  {background-position: -160px -32px;}
  
  .facebook span.image   {background-position: 0 0;}
  .twitter span.image    {background-position: -32px 0;}
  .flickr span.image     {background-position: -64px 0;}
  .youtube span.image    {background-position: -96px 0;}
  .vimeo span.image      {background-position: -128px 0;}
  .pinterest span.image  {background-position: -160px 0;}