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 }