overflow: hidden; on transitioning element - overflow

Question

As you can see here (fiddle), a is the parent and is set to overflow: hidden;. span is the child and has box-shadow set. When nothing happens, everything goes well, but when a user hovers the a, its overflow property seems to get overwritten (i.e. the shadow is shown in a square, rather than a circle, as it should). Any idea how to solve this?
Code:
HTML
<span>Hover me</span>
CSS
a {
overflow: hidden;
width: 52px;
height: 52px;
top: 0;
display: block;
position: relative;
margin: 50px;
background: red;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
border-radius: 200px;
opacity: 0.6;
}
a:hover {
opacity: 1;
top: -8px;
}
a > span {
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8);
}
a:hover > span {
box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8);
}

Answer 1

your question is not understable but try this if it can help you then....
a {
overflow: hidden;
width: 52px;
height: 52px;
top: 0;
display: block;
position: relative;
margin: 50px;
background: red;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
border-radius: 200px;
opacity: 0.6;
}
a:hover {
overflow: hidden;
opacity: 1;
}
a > span {
overflow: hidden;
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8);
}
a:hover > span {
overflow: hidden;
box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8);
}