Zoom et un Flou de l'image sur le vol stationnaire

Je veux un zoom et un flou de l'image lors de planer sur elle. Je suis en train de code suivant, il fonctionne en quelque sorte sur le Chrome (pas de transition en douceur, je ne sais pas pourquoi), mais ne fonctionne pas sur FF ou IE, même si j'ai lu que le flou devraient travailler avec ces navigateurs.

Aussi mon autre question est que, est-il possible d'agrandir l'image à partir du centre de la place du haut à gauche, comme dans l'exemple:

Le Lien De Démonstration

Voici le code:

HTML:

<div class="grow">
    <img src="image.jpg" />
</div>

CSS:

.grow{
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.grow img {
  height: 300px;
  width: 300px;
    -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;

     filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);  
    -ms-filter: blur(0px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); 


}

.grow img:hover {   
    width: 400px;
    height: 400px;    
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: url(blur.svg#blur);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');   
}
InformationsquelleAutor user2738640 | 2013-10-31
  1. 3

    Ajouter des marges négatives pour conserver l'image centrée:

    .grow img:hover {margin:-50px 0 0 -50px;}

    ou mieux encore utilisation transform:scale (comme suggéré par Paulie_D) pour effectuer un zoom, car il utilise le centre de son origine pour le transformer par défaut.

    .grow img:hover {transform: scale(1.33);}

    FYI. Le filter: url(blur.svg#blur); qu'il s'arrête de travailler pour moi dans Firefox, car le fichier n'existe pas à cette url dans votre Violon.

    Mise à jour: de travail Ajouté le flou dans les FF.

    Voir: Mis à jour le Violon à l'aide de transformer:l'échelle de travail et de flou.

    InformationsquelleAutor Moob
  2. 1

    Il y a quelques erreurs dans ton code que l'invalider

    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

    Vous laisser pour une autre ie feuille de style spécifique.

    Ici est une mise à jour de jsFiddle je me suis débarrassé de saccadée de transition ainsi http://jsfiddle.net/XR32V/3/

    • Merci mais je ne vois pas la différence, il ne fait toujours pas de flou dans Firefox ou IE, comme je l'ai demandé ci-dessus.
    InformationsquelleAutor
  3. 1

    Vous pouvez utiliser transform:scale et transform-origin au lieu de changer la largeur de l'image.

    Voir: JSFiddle Démo

    .grow img:hover {   
  -webkit-transform: scale(1.33);
  -webkit-transform-origin: 50% 50%;
    /* add other prefixes as required /*

    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: url(blur.svg#blur);

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); 

}
    InformationsquelleAutor Paulie_D
  4. 0

    Simple JS du plugin pour le zoom et le flou de l'image lors de planer sur elle

    Récupérer le Plugin

    InformationsquelleAutor greenlion