div-grid-hover-enlarge (http://cssdesk.com/xnKDc)

markup.htm

<!-- http://cssdesk.com/xnKDc -->
<div class="wrap">
<div class="r"><div class="c"><div>1</div></div><div class="c"><div>2</div></div><div class="c"><div>3</div></div><div class="c"><div>4</div></div></div>
<div class="r"><div class="c"><div>5</div></div><div class="c"><div>6</div></div><div class="c"><div>7</div></div><div class="c"><div>8</div></div></div>
<div class="r"><div class="c"><div>9</div></div><div class="c"><div>10</div></div><div class="c"><div>11</div></div><div class="c"><div>12</div></div></div>
<div class="r"><div class="c"><div>13</div></div><div class="c"><div>14</div></div><div class="c"><div>15</div></div><div class="c"><div>16</div></div></div>
</div>

styles.css

body {
  font-family: 'Consolas', 'Courier New', sans-serif;
  padding: 50px;
  font-size: 13px;
}

/* grid wrapper */
.wrap {
  /*border: 1px solid yellow;*/
  padding-top: 25px;
  padding-bottom: 25px;
  width: 330px;
}

/* rows */
.r {
 height: 70px;
 width: 305px;
 clear: both;
 /*border: 1px solid red;*/
 padding-left: 25px;
}

/* cells, and text div */
.c, .c div {
 width: 70px;
 height: 70px;
 float: left;
}

/* text divs */
.c div {
 border: 1px solid #ccc;
 text-align: center;
 font-size: 4em;
 cursor: default;
 color: #111;
}

/* text divs, hover */
.c div:hover {
  height: 120px;
  width: 120px;
  z-index: 1;
  margin-top: -25px;
  margin-left: -25px;
  position: absolute;
  background-color: #ccc;
  background: -webkit-gradient(linear, left top, right bottom, from(#aaa), to(#fff));
  border: 0;
  font-size: 7em;
  color: #000;
  -webkit-transition: all 0.2s ease-in;
}