<div class="container">
  <h3>Custom Image Cursor</h3>
  <p>
    Hovering over this table cell should show a clock-shape cursor.
  </p>
  <table>
    <tr>
      <td class="custom">Image Cursor</td>
    </tr>
  </table>
  <h3>General Purpose Cursors</h3>
  <table>
    <tr>
      <td class="auto">auto</td>
      <td class="default">default</td>
      <td class="none">none</td>
    </tr>
  </table>
  <h3>Links and Status Cursors</h3>
  <table>
    <tr>
      <td class="context-menu">context-menu</td>
      <td class="help">help</td>
      <td class="pointer">pointer</td>
    </tr>
    <tr>
      <td class="progress">progress</td>
      <td class="wait">wait</td>
    </tr>
  </table>
  <h3>Selection Cursors</h3>
  <table>
    <tr>
      <td class="cell">cell</td>
      <td class="crosshair">crosshair</td>
      <td class="text">text</td>
    </tr>
    <tr>
      <td class="vertical-text">vertical-text</td>
    </tr>
  </table>
  <h3>Drag and Drop Cursors</h3>
  <table>
    <tr>
      <td class="alias">alias</td>
      <td class="copy">copy</td>
      <td class="move">move</td>
    </tr>
    <tr>
      <td class="no-drop">no-drop</td>
      <td class="not-allowed">not-allowed</td>
    </tr>
  </table>
  <h3>Zooming Cursors</h3>
  <table>
    <tr>
      <td class="zoom-in">zoom-in</td>
      <td class="zoom-out">zoom-out</td>
    </tr>
  </table>
  <h3>Grabbing Cursors</h3>
  <table>
    <tr>
      <td class="grab">grab</td>
      <td class="grabbing">grabbing</td>
    </tr>
  </table>
  <h3>Resizing and Scrolling Cursors</h3>
  <table>
    <tr>
      <td class="e-resize">e-resize</td>
      <td class="ne-resize">ne-resize</td>
    </tr>
    <tr>
      <td class="n-resize">n-resize</td>
      <td class="nw-resize">nw-resize</td>
    </tr>
    <tr>
      <td class="w-resize">w-resize</td>
      <td class="sw-resize">sw-resize</td>
    </tr>
    <tr>
      <td class="s-resize">s-resize</td>
      <td class="se-resize">se-resize</td>
    </tr>
    <tr>
      <td class="ew-resize">ew-resize</td>
      <td class="ns-resize">ns-resize</td>
    </tr>
    <tr>
      <td class="nesw-resize">nesw-resize</td>
      <td class="nwse-resize">nwse-resize</td>
    </tr>
    <tr>
      <td class="col-resize">col-resize</td>
      <td class="row-resize">row-resize</td>
    </tr>
    <tr>
      <td class="all-scroll">all-scroll</td>
    </tr>
  </table>
</div>
body {
  background-color: #d4ebf2;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 90%;
  max-width: 900px;
}

table {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #eee;
  table-layout: fixed;
	border-collapse: collapse;
}

td {
  border: 1px solid #ddd;
  background: #fff;
  padding: 1em;
  vertical-align: middle;
  text-align: center;
}

.custom {
  cursor: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png), url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur), pointer;
}

.auto {
  cursor: auto;
}

.default {
  cursor: default;
}

.none {
  cursor: none;
}

.context-menu {
  cursor: context-menu;
}

.help {
  cursor: help;
}

.pointer {
  cursor: pointer;
}

.progress {
  cursor: progress;
}

.wait {
  cursor: wait;
}

.cell {
  cursor: cell;
}

.crosshair {
  cursor: crosshair;
}

.text {
  cursor: text;
}

.vertical-text {
  cursor: vertical-text;
}

.alias {
  cursor: alias;
}

.copy {
  cursor: copy;
}

.move {
  cursor: move;
}

.no-drop {
  cursor: no-drop;
}

.not-allowed {
  cursor: not-allowed;
}

.zoom-in {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.zoom-out {
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.n-resize {
  cursor: n-resize;
}

.ne-resize {
  cursor: ne-resize;
}

.e-resize {
  cursor: e-resize;
}

.se-resize {
  cursor: se-resize;
}

.s-resize {
  cursor: s-resize;
}

.sw-resize {
  cursor: sw-resize;
}

.w-resize {
  cursor: w-resize;
}

.nw-resize {
  cursor: nw-resize;
}

.se-resize {
  cursor: se-resize;
}

.ew-resize {
  cursor: ew-resize;
}

.ns-resize {
  cursor: ns-resize;
}

.nesw-resize {
  cursor: nesw-resize;
}

.nwse-resize {
  cursor: nwse-resize;
}

.col-resize {
  cursor: col-resize;
}

.row-resize {
  cursor: row-resize;
}

.all-scroll {
  cursor: all-scroll;
}