CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Snowlav
Snowlav

Reputation: 465

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

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?

Upvotes: 1

Views: 3160

Answers (3)

Kijewski
Kijewski

Reputation: 26033

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>

Upvotes: 5

David Gallardo
David Gallardo

Reputation: 504

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

Upvotes: 2

Chatra
Chatra

Reputation: 3139

iframe.contents().find('body').blur()

Upvotes: -4

Related Questions