Flou gaussien onHover à l'Aide de jQuery

Je me demande si il est possible d'appliquer un flou gaussien sur une div à l'aide de jQuery (ou CSS, jQuery peut modifier). J'ai regardé dans le flou(), mais au moins avec Safari, il ne semble pas qu'il accomplit ce que je suis à la recherche pour. Si possible, je veux utiliser fadeIn sur l'effet, il estompe peu à peu.

Merci pour toute aide!

OriginalL'auteur PF1 | 2009-12-27

  1. 10

    Être conscient que Blur est quand un DOM-élément, comme les zones de texte (intrants, etc.) perd le focus, et ne doit pas être mélangé avec le genre de flou dont vous parlez (gaussien/flou de mouvement).

    N'est pas bonne, croix-navigateur de solution pour ce problème. Vous pouvez, cependant, le flou des images à l'aide d'un API comme celui de Ben suggère. Ou par à l'aide.

    Peut-être que si vous trouvez un moyen de les attirer votre div contenu en HTML5 canvas vous pouvez ensuite appliquer le Flou, filtre à l'aide d' Pixastic?

    À ce jour, je ne suis pas au courant de tout bon cross-browser solution pour le dessin DOM contenu en HTML5 canvas. Il existe quelques techniques qui fonctionnent à un degré limité.

    OriginalL'auteur Mickel

  2. 5

    Découvrez l'blur.js plugin pour jQuery: http://blurjs.com, il utilise ma Pile algorithme de Flou qui, je crois, est actuellement le plus rapide basé sur JavaScript moyen de brouiller les éléments canvas: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

    OriginalL'auteur Quasimondo

  3. 4
    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='10');

    contenu de flou.svg

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>

    Plus : http://demosthenes.info/blog/534/Crossbrowser-Image-Blur

    S'il vous plaît ne pas coller la même réponse à plusieurs questions. si les questions sont des doublons, merci de les signaler comme telles. Si ils ne le sont pas, alors veuillez adapter votre réponse à la question posée.
    Il n'y a pas de css filtre de flou qui fonctionne sur IE11

    OriginalL'auteur Armel Larcier

  4. 0

    Il n'a pas été mentionné ici que nous pouvons créer une excellent réaliste de l'effet de flou pour le texte à l'aide de CSS3 text-shadow. Et, oui, bien sûr!) nous pouvons flou de solides antécédents et des frontières à l'aide de box-shadow (encart ombres et de multiples ombres sont autorisés, vous savez).

    Donc j'espère que dans la plupart des cas, vous pouvez atteindre le niveau de réalisme de l'effet flou combinant:

    1) le flou de l'image à l'aide de toile

    2) texte flou à l'aide de text-shadow

    3) solide arrière-plan et les frontières du flou à l'aide de box-shadow

    4) ai-je oublié quelque chose?....

    PS:
    Je crois qu'il n'est pas possible d'écrire une classe magique qui brouille tout code html.

    Les restrictions qui ne peuvent pas être surmontés: le flou de la bordure de l'image, le flou des médias intégrés

    Je dirait qu'il est possible de rendre flou une capture d'écran du site html2canvas.hertzen.com

    OriginalL'auteur Dan