Explanation of shine effect using css3

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;
}

Code (markup):

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);
}

Code (markup):

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 }

Code (markup):

 

Since he defined transitions for opacity, top and left for the .shine class, anytime those change, the transitions will be played. Also note that the icons and .shine are completely separate elements. Basically you're setting up an image using the gradients (same effect could be done with a transparent png) that's overlaid on the icon, and applying transitions so whenever you change the position or opacity, it'll look animated. At first (inactive) the shine gradient isn't visible to the user, but in :hover, it is visible and the animation is caused by the css transitions. Hopefully this explains it a bit and gives you understanding enough to do your own experiments. Post back if you have questions.

 

That was a useful post for me friends.Thank you.