Image tint with CSS using RGBA borders v2

img elements + various transitions on various borders

by thebabydino

HTML

<img src='http://img511.imageshack.us/img511/8963/blackchococakexxsmall.jpg' class='t1' />
<img src='http://img412.imageshack.us/img412/7626/blackforesticecreamxxsm.jpg' class='t2' />
<img src='http://img401.imageshack.us/img401/6011/butterflychocowcherryli.jpg' class='t3' />
<img src='http://img508.imageshack.us/img508/16/chocolatinexxsmall.jpg' class='t4' />
<img src='http://img24.imageshack.us/img24/4968/kprofiterolexxsmall.jpg' class='t5' />
<img src='http://img39.imageshack.us/img39/3351/macaronsxxsmalldnh.jpg' class='t6' />
<img src='http://img39.imageshack.us/img39/3351/macaronsxxsmalldnh.jpg' class='t7' />

CSS

img {
    width: 326px;
    height: 244px;
    border-style: solid;
    border-color: rgba(31, 127, 191, .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;
    float: left;
    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;
}
.t1 {
    background-image: url(http://img511.imageshack.us/img511/8963/blackchococakexxsmall.jpg);
}
.t2 {
    background-image: url(http://img412.imageshack.us/img412/7626/blackforesticecreamxxsm.jpg);
}
.t3 {
    background-image: url(http://img401.imageshack.us/img401/6011/butterflychocowcherryli.jpg);
}
.t4 {
    background-image: url(http://img508.imageshack.us/img508/16/chocolatinexxsmall.jpg);
}
.t5 {
    background-image: url(http://img24.imageshack.us/img24/4968/kprofiterolexxsmall.jpg);
}
.t6 {
    background-image: url(http://img39.imageshack.us/img39/3351/macaronsxxsmalldnh.jpg);
}
.t7 {
    background-image: url(http://img64.imageshack.us/img64/318/plumcaramelchocomousxsm.jpg);
}
img:hover {
    background-position: 0 0;
}
.t1:hover {
    border: double 0 rgba(0,0,0,0);
}
.t2:hover {
    border: dotted 0 rgba(0,0,0,0);
}
.t3:hover {
    background-image: none;
    border: dashed 0 rgba(0,0,0,0);
}
.t4:hover {
    border: ridge 0 rgba(0,0,0,0);
}
.t5:hover {
    background-image: none;
    border: solid 0 rgba(0,0,0,0);
}
.t6:hover {
    border: solid 0 rgba(0,0,0,0);
}
.t7:hover {
    background: -moz-linear-gradient(-45deg,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 26%, rgba(255,255,255,0) 50%, rgba(0,0,0,0) 74%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 100%), -moz-linear-gradient(45deg,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 26%, rgba(255,255,255,0) 50%, rgba(0,0,0,0) 74%, rgba(0,0,0,1) 75%, rgba(0,0,0,1)...