Hovers and Fading - html

Question

I hope you can help me. I'm working on my new portfolio website and need a bit of help on hover effects in work showcase section. I'm not good developer so excuse me if my code sux x), I do design mostly. And ye, i used Bootstrap 3.0 as my framework.
// Here is the HTML code //
<div class="portfolio" id="portfolio"> <!-- portfolio begin -->
/unimportant stuff...../
<div class="container my-creations">
<div class="row">
<div class="col-md-3">
<a href="#">
<div class="circle">
<img src="img/gmedia.png" alt="" id="gmedia" width="115" height="115">
</div>
</a>
</div>
<div class="col-md-3">
<a href="#">
<div class="circle">
<img src="img/ginc.png" alt="" id="ginc" width="136" height="114">
</div>
</a>
</div>
<div class="col-md-3">
<a href="#">
<div class="circle">
<img src="img/fgeeks.png" alt="" id="fgeeks" width="107" height="115">
</div>
</a>
</div>
<div class="col-md-3">
<a href="#">
<div class="circle">
<img src="img/weboxit.png" alt="" id="wbx" width="115" height="115">
</div>
</a>
</div>
</div> <!-- end of row -->
</div> <!-- end of my-creations -->
</div> <!-- end of portfolio -->
//And here is the following CSS//
.portfolio {height: 100%;}
.my-creations {margin-top: 60px;}
.circle {
width: 270px;
height: 270px;
line-height: 270px;
border-radius: 1000000px;
background-color: #262d30;
border: 8px solid #2c3235;
text-align: center;
background-image: url('img/gmedia.png') no-repeat;}
.circle img {
vertical-align: middle;
display: inline-block;
margin-bottom: 15px;
filter: url(filters.svg#grayscale); /* Firefox */
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Webkit */ }
#ginc {margin-bottom: 30px;}
.circle img:hover {
filter: none;
-webkit-filter: grayscale(0);}
And here are my questions:
Is there a way when hover .circle that my img changes filter?
And how can I apply fade hover on img? So that it slowly goes from black and white to colorful image. ---- ANSWERED, THANKS bboysupaman and JoshC!
I hope you can help me, and if you need more info, just ask.

Answer 1

You can use CSS transitions!
Add the following to your css. =)
.circle img
{
transition: all 2s;
-webkit-transition: all 2s;
}
.circle:hover img {
opacity:.5;
}

Answer 2

On the other hand, you can use Jquery to make animation. I am pretty sure that Twitter-bootstrap comes Jquery code too.
However, if you are worried about performance, you can stick with css3.
HTML Code:
<div class="circle1">
<img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"
width="80px" height="80px" />
</div>
Jquery Code:
$(document).ready(function () {
$(".circle1").mouseenter(
function () {
$(".circle1").fadeOut();
});
$(".circle1").mouseleave(
function () {
$(".circle1").fadeIn();
});
});
Here is an example of jsfiddle.
http://jsfiddle.net/7MV6Q/