Alternative Ways to change image color on hover (filters not working)

I'm currently working on this site http://66.147.244.95/~crossfy6/ and I found some open source code for animated icons in circles and revised it for my main menu icons.

Unfortunately, it wasn't until after making it in chrome (if you view it in chrome it works perfectly) I did test it in another browsers and found out that the greyscale filter I used isn't supported in IE and Safari.

I'm wondering if there are any other ways I can accomplish this effect. I thought of creating another set of icon pictures that were grey and transitions them on hover, but the only way to do that would be to rewrite the bulk of the menu since there all set as img's and not backgrounds to divs that I can change with css. Any other thoughts? Or do I basically need to start over? I know the basics of jquery and javascript but not how to implement them with wordpress, which is what I'm using.

HTML

<div class="gridcontainer clearfix">
<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/about/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
                    <span  style="width:110px;" >ABOUT</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-question-mark-e1394408760835.png" style="padding-right:5px; width:63px;"  alt="" />
                </div>
            </div>
        </a>
    </div>
</div>

<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/wod/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
                    <span style="width:128px;">WOD</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-kettlebell-icon.png" style="width:80px" alt="" />
                </div>
            </div>
        </a>
    </div>
</div>


<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/nutrition/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
                    <span style="width:124px;">NUTRITION</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/apple.png" style="width:80px" alt="" />
                </div>
            </div>
        </a>
    </div>
</div>

<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/rates-and-fees/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
        <span>RATES</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-wallet.png" style="margin-top:27px" alt="" />
                </div>
            </div>
        </a>
    </div>
</div>



<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/schedule/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
                    <span style="padding-left: 5px;">SCHEDULE</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-calendar.png" alt="" />
                </div>
            </div>
        </a>
    </div>
</div>

And the CSS:

/* -- Circular Work -- */
.gridcontainer {
    width: 960px;
    margin: 0px auto;
}

.grid_3 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 50px;
    width: 170px;
}

.grid_9 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    width: 700px;
}

.fmcircle_out {
    width: 138px;
    height: 138px;
    background-color:#dd2027;
    text-align: center;
    display: block;
    margin-left: 10px;
    opacity: 1; 


    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_out:hover {
    opacity: 1; 


    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

/*
.fmcircle_out:hover .fmcircle_in img {
    margin: 20px;
    width: autopx;
    height: 90px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
*/

.fmcircle_in {
    width: 130px;
    height: 130px;
    margin: 4px;
    display: inline-block;
    overflow: hidden;
    -webkit-filter: grayscale(100%);

    border-radius: 85px;
    -moz-border-radius: 85px;
    -webkit-border-radius: 85px;
    -o-border-radius: 85px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_out:hover .fmcircle_in {
    width: 130px;
    height: 130px;
    margin: 4px;
    display: inline-block;
    overflow: hidden;

    -webkit-filter: grayscale(0%);  
    border-radius: 85px;
    -moz-border-radius: 85px;
    -webkit-border-radius: 85px;
    -o-border-radius: 85px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_in img {
    border: none;
    margin: 23px;
    width: auto;
    height: 85px;


    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_in span {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    width: 120px;
    background: none;
    color: #000;
    font-size:20px;
    padding: 0px;
    margin: 52px 0 0 0px;
    height: 20px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    float: left;
    position: absolute;
    opacity: 0;

    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_out:hover .fmcircle_in span {
    opacity: 1;



    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

any and all help/insight appreciated! thanks!

Answers


Create a file named filters.svg with the following contents:-

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

Add css code

.fmcircle_in{
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
.fmcircle_out:hover .fmcircle_in {
filter: none;
    -webkit-filter: grayscale(0);}

add following to css code for IE

.fmcircle_in span {filter: alpha(opacity=0);}

.fmcircle_out:hover .fmcircle_in span{filter: alpha(opacity=100);}

Need Your Help

bower or grunt keeps removing jquery from index.html

jquery gruntjs bower

This is driving me crazy. So far Bower+Grunt (via Yeoman) has been a major source of frustration and a waste of time. All I want is my app to use the latest (2.1.0) version of jquery.

Prevent insertion of duplicates

sql sql-server

I have a table with columns CompanyID, EmployeeCode. EmployeeCode is unique and CompanyID can be repeated. So we can keep a list of employees in Google, Apple etc.