Change Image on hover using CSS and Sprite Image

Changing an image on hover using CSS and sprite image is very simple and is done by just varying the background position. The trick behind doing this is you have to make the image as background of an element and mention height and width of that element according to background image that should show up when the image is not hovered and when the image is hovered show the rest part of the image by varying the backgroundpositions.

See the Pen rLjJJZ by Arun Biradar (@arunvbiradar) on CodePen.