Image Sprites

by Wentz Wu

HTML

<header>Image Sprites</header>
<div id="image-sprites">
  <img src="http://www.ajoft.com/wp-content/themes/ajoft/images/features-3-icons.png">
  <span class="icon"></span>
</div>

CSS

#image-sprites {
  position: relative;
}

img {
  position: absolute;
  top: 10px;
  left: 100px;
  border: 1px solid grey;
}

span {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 47px;
  width: 47px;
  background: rgba(0, 0, 0, 0) url("http://www.ajoft.com/wp-content/themes/ajoft/images/features-3-icons.png") no-repeat scroll 0 -188px / auto;
  perspective-origin: 23.5px 23.5px;
  transform-origin: 23.5px 23.5px;
}