Hovers and Fading

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:

1. Is there a way when hover .circle that my img changes filter?

2. 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

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/

Answer 2

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;
}