12

I am trying to figure out how to change the color of an image that is half transparent and half solid color.

I want to be able to change the color of the white so I can add a hover, and add the ability to have a dynamic way to change the colors in wordpress. Using photoshop to fill the image isn't an option because I am going to build a color changer in to my Wordpress theme.

I used a jQuery script called JFlat.js, because it seemed like EXACTLY what I needed. Although it doesn't seem to work at all for me. Following the exact steps I am guessing it is because it uses an old version of jQuery.

Can anyone offer me some assistance?

Here is a black version on the image, you can't see the white one so I will post this one for a better of idea of what I am talking about.

enter image description here

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
user1632018
  • 2,485
  • 10
  • 52
  • 87

3 Answers3

15

Use an SVG icon, this one comes from Iconic. Icon melon is also good

Otherwise you could use a font-icon, this one comes from FontAwesome

If you must, you can use a CSS Filter but it is only supported in newer browsers. The best fallback would be to use SVG filter to do the same thing and use a data URL to apply it. Demo

-webkit-filter: invert(100%);

You could also use a sprite like agconti suggested

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
9

For what it's worth, this can also be done with svg

FIDDLE

Check out google's online svg-editor - which I used to produce the svg. (except for the css classes which I added later on)

svg

<svg class="play" width="252" height="252" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <circle class="outer" r="123.16656" cy="128" cx="128" 0 fill="#000000"/>
  <circle class="inner" r="97" cy="127" cx="128" fill="#ffffff"/>
  <path class="triangle" transform="rotate(89.2704 134.893 125.778)" id="svg_6" d="m93.75,161.77814l41.14282,-72l41.14288,72l-82.28571,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"  fill="#000000"/>
 </g>
</svg>

css

.play:hover .outer, .play:hover .triangle
{
    fill: #fff;
}
.play:hover .inner
{
    fill: #000;
}
Danield
  • 121,619
  • 37
  • 226
  • 255
3

You could try avoiding JQuery all together and use just plain old css and html. The code shows the concept, but you'll need to adjust the dimensions to make it work. You might find that using border-radius:100% more useful. Then you can apply :hover styles as necessary. 

  <div class="outer-circle">
   <div class="inner-circle">
      <div class="triangle">
      </div>
  </div>
</div>

<style>
    .outer-circle {
        padding: 15px 0 0 15px;
        width: 150px;
        height: 150px;
        background: black;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
        border-radius: 80px;

    }

    .inner-circle {

        width: 135px;
        height: 135px;
        background: white;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
        border-radius: 80px;
        position:relative;
    }


    .triangle {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 80px solid black;
        border-bottom: 40px solid transparent;
        position: absolute;
        top:25px;
        left: 35px;
    }
</style>
BillyJMcDonald
  • 71
  • 8