Docs

[padmorejordan]

hello, i found a custom code within the forum to have the images color go from grey to colored when hover over. the issue im having is the same images do not appear at all when the website is viewed in firefox. is there a way to change this?
http://padmorejordan.com/portfolio/

[Christopher]

Hi there,

Please update your code to :

.my-image:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

}
.my-image {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    border: 2px solid #FFFFFF;
    transition: all 0.2s ease-in-out;  
  filter: url("data:image/svg+xml;utf8,<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>#grayscale"); /* Firefox 10+, Firefox on Android */

}

Hope it helps.

[padmorejordan]

i made the change and it does not seem to take effect

[Rad]

Hi there,

I checked and it’s working. What browser and version you’re testing it on? It works on both chrome and firefox on my end.

Please clear your browser cache before testing.

Thanks!

[padmorejordan]

it only seems to work on chrome from my computer and any ive tested it on. ive tried it on firefox and internet explorer and i have the latest versions of all 3

[Christopher]

Hi there,

Please update your code to:

.my-image:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);

}
.my-image {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    border: 2px solid #FFFFFF;
    transition: all 0.2s ease-in-out;  
  filter: url("data:image/svg+xml;utf8,<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>#grayscale"); /* Firefox 10+, Firefox on Android */
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: gray; /* IE 6-9 */

}

Clear cache on your browsers and check again.

Thanks.

[padmorejordan]

i tried this one aswell and it still doesnt work on firefox or internet explorer. although, the images now show on internet explorer, they still dont go from grey to color, and the images just wont show on firefox

[Rupok]

Hi there,

Thanks for writing back. The suggested code is for all browsers. It’s working on Firefox fine on my end and I can’t guarantee for IE.

Cheers!

[padmorejordan]

im sorry, it seems to work on my work computer for firefox and chrome. no fade for IE but i can live with that. im sorry for the inconvinience.

[Friech]

Cool, please feel free to get in touch with us regarding any further queries about the X|Theme and Cornerstone.

Cheers!

[Author]

Posts