Question

I Had read somewhere on a webtutorial that we can use only a single Image for hover effects in css. For Eg. I Need to input only this image in CSS

So, When the Facebook Icon is not hover we see the dull grey icon, but when someone hovers over the icon, the blue icon is displayed and I need to use only one image file in the CSS for this purpose.

How Can we do that. Also, I would like to know what are these kind of images know as ?

Answer 1

They are called sprites

They allow you to use one image for multiple elements, that can look entirely different

Official Documentation

I made a quick example to do what you required here

<div></div>

div {
  background: url('http://i45.tinypic.com/2jee9zo.png');
  background-position: -10px -15px;
  height: 70px;
  width: 70px;
}

div:hover {
  background-position: -10px 83px;
}