javascript - Alternative Ways to change image color on hover (filters not working) -
i'm working on site http://66.147.244.95/~crossfy6/ , found open source code animated icons in circles , revised main menu icons.
unfortunately, wasn't until after making in chrome (if view in chrome works perfectly) did test in browsers , found out greyscale filter used isn't supported in ie , safari.
i'm wondering if there other ways can accomplish effect. thought of creating set of icon pictures grey , transitions them on hover, way rewrite bulk of menu since there set img's , not backgrounds divs can change css. other thoughts? or need start over? know basics of jquery , javascript not how implement them wordpress, 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 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: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; -ms-transition: 0.5s linear; transition: 0.5s linear; } .fmcircle_out:hover { opacity: 1; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; -ms-transition: 0.5s linear; transition: 0.5s linear; } /* .fmcircle_out:hover .fmcircle_in img { margin: 20px; width: autopx; height: 90px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; -ms-transition: 0.5s linear; transition: 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: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; -ms-transition: 0.5s linear; transition: 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: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; -ms-transition: 0.5s linear; transition: 0.5s linear; } .fmcircle_in img { border: none; margin: 23px; width: auto; height: 85px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; -ms-transition: 0.5s linear; transition: 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: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; -ms-transition: 0.5s linear; transition: 0.5s linear; } .fmcircle_out:hover .fmcircle_in span { opacity: 1; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; -ms-transition: 0.5s linear; transition: 0.5s linear; } any , help/insight appreciated! thanks!
create file named filters.svg 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 css code ie
.fmcircle_in span {filter: alpha(opacity=0);} .fmcircle_out:hover .fmcircle_in span{filter: alpha(opacity=100);}
Comments
Post a Comment