0

I was wondering, why all the other browsers work with my TUMBLR customize theme, and the Mozilla seems to have its own ways:

#post img {
width:500px;
margin-left: -43px;
opacity:0.75;
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+ */     
filter: gray; /* IE6-9 */
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%); 
transition: all 0s 99999s;
-moz-transition: all 0s 99999s; 
-webkit-transition: all 0s 99999s;
}

#post img:hover {
opacity:1;
filter: none !important;
/* transition on mouseover */
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; 
}

Basically intention was to put hover in a permanent state, all pictures get grey then recolor and stay in permanent state. The code includes a delay in transition to the normal state of the image.

Can you please let me know whats the issue? Thanks a lot! Peter.

Piotr Zalewski
  • 1
  • Change the `filter:none` to `filter: grayscale(0);` However, you cannot **permanently** affect an element with a CSS `:hover` state or remove a property. – Paulie_D Sep 02 '14 at 09:15
  • Yes I know. The current settings are working with permanent hover state on webkit browsers opera and safari deal with it perfectly. The only problem is with grayscale in Mozilla. – Piotr Zalewski Sep 07 '14 at 09:27
  • you can have a look: http://www.noo-studio.tumblr.com – Piotr Zalewski Sep 07 '14 at 09:27

0 Answers0