0

I have this: demo

background-image: url('http://colorisrelative.com/wp-content/uploads/2010/08/halation_2color_orangecyan.png');
background-position: 80% 0%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

I put a background-image under the icons and change the position on hover. It works perfectly in Chrome, but not in Mozilla or IE (You need to watch the demo in chrome and Moz or IE). So I need a fallback. I tried the solution of this article but I dont get it to work.

Is there a way to say, use it only in chrome and take a static text color with hover in every other browser?

I appreciate every solution

Fluqz
  • 349
  • 1
  • 4
  • 17
  • Where is the text that you are referring to? the icons? Please clarify. – Marc Audet Mar 06 '15 at 12:23
  • Yes, the icons, sorry. I revised it. – Fluqz Mar 06 '15 at 12:26
  • I think same effect can be reached with just text color and opacity for two icon states. But if you will have complex text background - https://github.com/myadzel/patternizer can help for mozilla. – Sergey Litvinenko Mar 06 '15 at 12:32
  • What i wanted to achieve is the animation of the background image sliding to the right on hover. Thanks! Ill try it. – Fluqz Mar 06 '15 at 12:37
  • Take a look at this post: http://stackoverflow.com/questions/9362639/moz-background-cliptext-does-not-work-in-firefox – Carles Xavier Mar 06 '15 at 12:43
  • So there is no solution? Is there no way to check if its chrome and give him a class with the background-image else give him another class with a static color? – Fluqz Mar 06 '15 at 12:59

0 Answers0