Image tint with CSS using RGBA borders

bg image

by thebabydino

HTML

<a href='#'></a>

CSS

a {
    width: 326px;
    height: 244px;
    border-style: solid;
    border-color: rgba(255, 127, 63, .7);
    border-width: 122px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    background-image: url(http://img511.imageshack.us/img511/8963/blackchococakexxsmall.jpg);
    background-position: 50% 50%;
    -webkit-transition: border .7s linear;
    -moz-transition: border .7s linear;
    -ms-transition: border .7s linear;
    -o-transition: border .7s linear;
    transition: border .7s linear;
}
a:hover {
    border: solid 0 rgba(0,0,0,0);
    background-position: 0 0;
}