Hover over the numbers!

Div #1

Code: <div class="one">1</div>

Div #2

Code: <div class="two">2</div>

Get the CSS

.one,.two {
	background-color:#aaa;
	border:3px solid #444;
	color:#fff;
	font:bold 100px/250px arial;
	height:250px;
	margin:100px auto;
	text-align:center;
	width:250px;
}
.one {
	-moz-transition:0.5s;
	-webkit-transition:0.5s;
	-o-transition:0.5s;
	-ms-transition:0.5s;
	transition:0.5s;
	color:transparent;
	text-shadow:0 0 15px #fff;
}
.two {
	-moz-transition:0.5s;
	-webkit-transition:0.5s;
	-o-transition:0.5s;
	-ms-transition:0.5s;
	transition:0.5s;
	text-shadow:60px 10px 6px rgba(0,0,0,0.5);
}
.one:hover {
	border-radius:250px;
	box-shadow:0 10px 10px rgba(0,0,0,0.5);
	color:#fff;
	text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.two:hover {
	background-color:#ddd;
	border:3px solid #09f;
	text-shadow:-60px 10px 6px rgba(0,0,0,0.5);
	width:500px;
}

Sidebar