Filter CSS on blog posts – *corrected for Firefox*

Sorry, just to prove I am trying to solve things for myself before I post 😛

~/relia/inc/css/style.css line 1863.

div.blog-post-image {

    height: 300px;

    width: 100%;

    border-radius: 3px;

    background-size: cover;

    background-position: 50%;

    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"); 

    filter: gray;

    -webkit-filter: grayscale(100%); 

}

.blog-roll-post article:hover div.blog-post-image {

    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");

    -webkit-filter: grayscale(0%);

}

the filter syntax is incorrect for Firefox, preventing the background image from showing at all. To fix this, the above code should be changed to:

div.blog-post-image {

    height: 300px;

    width: 100%;

    border-radius: 3px;

    background-size: cover;

    background-position: 50%;

	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");

    filter: gray;

    -webkit-filter: grayscale(100%); 

}

.blog-roll-post article:hover div.blog-post-image {

    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");

    -webkit-filter: grayscale(0%);

}

😉