Gradient on hover

by thebabydino

HTML

<a href='#'>
    <img src='http://img511.imageshack.us/img511/8963/blackchococakexxsmall.jpg'/>
    <div class='mask t1'></div>
</a>
<a href='#'>
    <img src='http://img412.imageshack.us/img412/7626/blackforesticecreamxxsm.jpg'/>
    <div class='mask t2'></div>
</a>

CSS

a {
    height: 244px;
    display: block;
    float: left;
    overflow: hidden;
    position: relative;
}
.mask {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: rgba(31,63,127,.5);
    -webkit-transition: all .5s linear, opacity 2s ease-in;
    -moz-transition: all .5s linear, opacity 2s ease-in;
    -ms-transition: all .5s linear, opacity 2s ease-in;
    -o-transition: all .5s linear, opacity 2s ease-in;
    transition: all .5s linear, opacity 2s ease-in;
}
a:hover .t1 {
    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) 100%);
    background: -webkit-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%), -webkit-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%);
    background: -o-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%), -o-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%);
    background: -ms-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%), -ms-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%);
    background: linear-gradient(-45deg,  rgba(0,0,0,1) 0%,rgba(0,0,0,1)...