Image can exceed the side borders of its div but not the top/bottom borders

I can't manage to have an image to exceed the top of its div

JsFiddle

Fullscreen JsFiddle (best way to understand my problem)

HTML :

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <div class="circle-normal"> 
                <a href="#" data-active="http://ift.tt/1CxiHPE" data-inactive="http://ift.tt/1CxiJqN"></a>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <div class="circle-small90"> 
                <a href="#" data-active="http://ift.tt/1CxiHPE" data-inactive="http://ift.tt/1CxiJqN"></a>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <div class="circle-small80"> 
                <a href="#" data-active="http://ift.tt/1CxiHPE" data-inactive="http://ift.tt/1CxiJqN"></a>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <div class="circle-small70"> 
                <a href="#" data-active="http://ift.tt/1CxiHPE" data-inactive="http://ift.tt/1CxiJqN"></a>
            </div>
        </div>
    </div>
</div>

CSS

   [class*="col-"] {
    padding-left:0;
    padding-right:0;
}
[class*="circle-"] {
    height: 0;
    overflow: auto;
    padding-bottom: 100%;
    position: relative;
}
[class*="circle-"] > a {
    border-radius: 100%;
    position: absolute;
    background-size: cover;
    background-position: center center;
}
.circle-normal {
    border-radius: 100%;
}
.circle-normal a {
    width: 100%;
    height: 100%;
}
.circle-small90 {
    left:5%;
}
.circle-small90 a {
    width: 90%;
    top:5%;
    height: 90%;
}
.circle-small80 a {
    width: 80%;
    height: 80%;
    top:10%;
}
.circle-small70 {
    left:-15%;
}
.circle-small70 a {
    width: 70%;
    height: 70%;
    top:15%;
}
@media(max-width: 767px) {
    .circle-small90 {
        left:5%;
    }
    .circle-small90 a {
        top:5%;
    }
    .circle-small80 {
        left:10%;
    }
    .circle-small80 a {
        top:0%;
    }
    .circle-small70 {
        left:15%;
    }
    .circle-small70 a {
        top:-15%;
    }
}
.col-xs-12 {
    box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
}

My problem :

When my code is displayed horizontally, everytyhing is fine to me, equal space between circles, vertically centered, they can exceed the borders of their div. But when the width of the browser is reduced, everything is stacked vertically, as planned; except the last circle is cropped by the limits of its div (i printed out the border of the col-xs-12 to see better). It doesn't happen when the col-**-3 are horizontal.

Am I missing someething ?

(not enough reputation for images, i had to put (dot) instead of . Sorry about that)

http://ift.tt/1bDy2nL

Thanks in advance for any help you can provide.