Explanation of shine effect using css3

[cryoffalcon]

Hi,
well here in this page there is a demo of shine effect that i am interested in using http://anton.trollback.se/shine-effect/
But i don't want to use it just by copy pasting, as i know a little bit css so i would like to understand what's going on, but by looking at it i was not able to clear up my mind and as i found no explanation to this anywhere on google, So i came here ^_^

In the below code it is just to display icon and few rules are set i understand this part just a question why is overflow set to hidden?

/* Setting up the icons */
.icon {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 12px 0;
	float: left;
	position: relative;
	overflow: hidden;
}

In this part of below code, i understand that gradient is made, duration is used, transform is used, background is used. Why is opacity set to 0? why is width & height 64px which is double of icon size? i guess position absolute is used to overlay.
But the value top -45 and left -63 is what i was not able to understand that why these values? even though when i changed them using firebug the shine effect was not effect that much until values are changed extremly.
One thing that i was thinking on is that why can use .shine only instead of .icon .shine, as i tried only .shine it works in firebug.

/* The shine overlay */
.icon .shine {
	opacity: 0;
	width: 64px;
	height: 64px;
	position: absolute;
	top: -45px; left: -63px;
	background: rgba(255, 255, 255, 0.2);
	background: -moz-linear-gradient(
		left,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 75%,
		rgba(255, 255, 255, 0.8) 90%,
		rgba(255, 255, 255, 0.0) 100%
	);
	background: -webkit-linear-gradient(
		top,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 75%,
		rgba(255, 255, 255, 0.8) 90%,
		rgba(255, 255, 255, 0.0) 100%
	);
	background: -webkit-gradient(
		linear, left top, right top,
		color-stop(0%  ,rgba(255, 255, 255, 0.2)),
		color-stop(75% ,rgba(255, 255, 255, 0.2)),
		color-stop(90% ,rgba(255, 255, 255, 0.8)),
		color-stop(100%,rgba(255, 255, 255, 0.0))
	);
	background: -o-linear-gradient(
		top,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 75%,
		rgba(255, 255, 255, 0.8) 90%,
		rgba(255, 255, 255, 0.0) 100%
	);
	background: -ms-linear-gradient(
		top,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 75%,
		rgba(255, 255, 255, 0.8) 90%,
		rgba(255, 255, 255, 0.0) 100%
	);
	background: linear-gradient(
		top,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 75%,
		rgba(255, 255, 255, 0.8) 90%,
		rgba(255, 255, 255, 0.0) 100%
	);
	-webkit-transition-property: left, top, opacity;
	   -moz-transition-property: left, top, opacity;
	    -ms-transition-property: left, top, opacity;
	     -o-transition-property: left, top, opacity;
	        transition-property: left, top, opacity;
	-webkit-transition-duration: 0.5s, 0.5s, 0.1s;
	   -moz-transition-duration: 0.5s, 0.5s, 0.1s;
	    -ms-transition-duration: 0.5s, 0.5s, 0.1s;
	     -o-transition-duration: 0.5s, 0.5s, 0.1s;
	        transition-duration: 0.5s, 0.5s, 0.1s;
	-webkit-transition-timing-function: ease;
	   -moz-transition-timing-function: ease;
	    -ms-transition-timing-function: ease;
	     -o-transition-timing-function: ease;
	        transition-timing-function: ease;
	-webkit-transform: rotate(30deg);
	   -moz-transform: rotate(30deg);
	    -ms-transform: rotate(30deg);
	     -o-transform: rotate(30deg);
	        transform: rotate(30deg);
}

In this code below, why is top and left now at -12 and -10 respectively?
why in .icon:active .shine the opacity is set to 0? and margin top to 1px?

/* Simply moving the overlay infront of the icon */
.icon:hover .shine {
	opacity: 1;
	top: -12px;
	left: -10px;
}
.icon:active .shine { opacity: 0 }
.icon:active { margin-top: 1px }