28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'espère que je poste dans la bonne section.

Je suis entrain de mettre en place un slider d'images avec effet accordéan. Les images sont par défaut en noir et blanc, et deviennent en couleurs au survol, puis redeviennent en noir et blanc si elle ne sont pas survolées.

J'utilise du javascript pour le slider, J'applique un filtre par défaut dans le css sur les images pour les rendre en noir et blanc par défaut:
.gallery_item img
{
	position: relative;
	-webkit-transform: translate3d(0, 0, 0) skew(10deg, 0deg);
	-moz-transform: translate3d(0, 0, 0) skew(10deg, 0deg);
	-ms-transform: translate3d(0, 0, 0) skew(10deg, 0deg);
	transform: translate3d(0, 0, 0) skew(10deg, 0deg);
	-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><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>#greyscale"); 
  filter: gray;
}


Ce code fonctionne correctement sur tous les browsers.

Dans mon code javascript, j'applique une fonctionne zoomIn sur les éléments qui fonctionne correctement, les images se colorent comme je le souhaite. J'utilise la propriété filter:initial.

Mais j'ai un problème avec la fonctione zoomOut, qui fonctionne sur tous les browsers à part firefox

Le code est le suivant:

$(this).find('img').css(
			{'-webkit-filter':'grayscale(100%)',
			'-moz-filter':'grayscale(100%)',
			'-ms-filter':'grayscale(100%)',
			'-o-filter':'grayscale(100%)',
			'filter': 'url("data:image/svg+xml;utf8,<svg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' height=\'0\'><filter id=\'greyscale\'><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>#greyscale")',
			'filter': 'gray'
			});


Pouvez vous m'aider à détecter le problème.

Merci d'avance.