Photoshop Question posted in
The official user guide can be found here.

How do I blur an iframe like I blur an image? – Photoshop

Is there a way to blur an iframe for a few seconds using jQuery? It should look something like a gaussian blur, for example in photoshop. (here’s an example image, see the right side)

The link being displayed in the iframe is NOT of the same origin, which is why I have been struggling with this. It’s not possible to modify the iframe’s contents.

Is it possible to apply a blur to an iframe of a different origin only for a few seconds using jQuery?

Tags:

3

Answers


  1. 0 
    iframe.contents().find('body').blur()
    Login or Signup to reply.
  2. 0

    You can blur any element in CSS 3:

    #iframe-container {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
    <div id="iframe-container">
  <iframe src="//example.com"></iframe>
</div>
    Login or Signup to reply.
  3. 0

    You can just apply a blur filter via CSS3:

    $("iframe").css("filter","blur(5px)")

    Don’t forget to polyfill the filter attribute. Maybe you can consider to apply a class to the iframe with the appropiate properties as you can see here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search