CSS: Adding gradiency on hover - css

Question

Is it possible to add gradiency on hover? I want to avoid images and use pure css3.
I have a simple box with
backgroundc-color: blue whihc has an icon.
I want to add a gradient effect on mouse over.
How can i get that gradient glow effect as the screen grab?
I am trying to get this effect below:

Answer 1

You can do gradients in CSS, although the definitions can get a bit verbose. Here's a solid CSS3 gradient creator.
Then just add a :hover to your link.
.your-link:hover {
// gradient here
}

Answer 2

This is how I would do it:
.link:hover {
background-image: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 116, color-stop(1%, #57fdfe), color-stop(100%, #2c95dd));
background-image: -webkit-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -moz-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -ms-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -o-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: radial-gradient(farthest-side at center bottom, #57fdfe 1%, #2c95dd 100%);
}
Thats a complete example, you can just copy and paste and it should work :) enjoy!
Note that has your colours in there and its radial :)

Answer 3

Is this the kind of thing you are looking for?
Obviously use your own colors.
DEMO
This is the css:
.blah:hover {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0198E1), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #0198E1, #00FFFF);
background-image: -moz-linear-gradient(top, #0198E1, #00FFFF);
background-image: -ms-linear-gradient(top, #0198E1, #00FFFF);
background-image: -o-linear-gradient(top, #0198E1, #00FFFF);
}

Answer 4

For best practices for css3, you can go to css3please.com. Just adding :hover to the class will give you what you need:
.box_gradient:hover {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}