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:
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');
}
Vous devez vous connecter pour publier un commentaire.
Ajouter des marges négatives pour conserver l'image centrée:
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.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.
Il y a quelques erreurs dans ton code que l'invalider
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/
Vous pouvez utiliser
transform:scale
ettransform-origin
au lieu de changer la largeur de l'image.Voir: JSFiddle Démo
Simple JS du plugin pour le zoom et le flou de l'image lors de planer sur elle
Récupérer le Plugin