CSS3 Gradient hover Transition

gradient_hover.css

.box{ width:300px; height:300px; background-color:#30F; -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}
.box:hover{  background-color: #ff007c;
    background-color: rgba(255,0,124,0.5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(9,157,179,0.6)), to(transparent));
    background-image: -webkit-linear-gradient(top, rgba(9,157,179,0.6), transparent);
    background-image: -moz-linear-gradient(top, rgba(9,157,179,0.6), transparent);
    background-image: -o-linear-gradient(top, rgba(9,157,179,0.6), transparent);
    background-image: linear-gradient(to bottom, rgba(9,157,179,0.6),transparent);
	    }

It's cool! but i guess it won't work on image hover?