Как реализовать эффект «замыливания» на jQuery?

Question

[georgich]

Приветствую.
Есть вот такой пример: codepen.io/jackrugile/pen/EyABe
В нем показан эффект с текстом в ячейках. Если же в ячейку добавить изображение, то эффект на этой ячейке работать не будет. Разметка моей страницы выглядит таким образом:

...
	<div class="box">
		<img src="http://xakeroff.net/img/avatars/0001/32/6d/15522-1331035428.png">
		<p>Some text</p>
		<p>Some text</p>
	</div>
	<div class="box">
		<img src="http://xakeroff.net/img/avatars/0001/32/6d/15522-1331035428.png">
		<p>Some text</p>
		<p>Some text</p>		
	</div>
...

Таких div'ов может быть сколь угодно. Отсюда у меня и возникло ощущение, что это надо как-то реализовать на jQuery. В итоге задача получается такой: изначально все блоки видны нормально, а при наведении курсором на один из блоков, остальные - "замыливаются". Подскажите, пожалуйста, какие методы нужно посмотреть в jQuery, чтобы реализовать такой эффект.
Спасибо!

Answer 1

[georgich]

Спасибо. Сам нашел, что искал:
tympanus.net/Tutorials/ItemBlur

Answer 2

[deleted-tnorman]

Там реализация через text-shadow и box-shadow, CSS3.
Насколько я понял, там js вообще нету.

Comments

[georgich]

Там - да. Но не работает с картинкой. Если вы в любую ячейку вставите изображение без текста, то изображение "замыливаться" не будет.

[deleted-tnorman]

Естественно, потому, что эффект замыливания там достигается путем изменения параметров ДОМэлементов и текста.
Для замыливания в более крупном масштабе, вам понадоибтся канвас на всю страницу и партянка javascript кода.

Answer 3

[Александр Таратин]

jsfiddle.net/QW01_01/kp65csm2/2

но ie в пролете.

Comments

[georgich]

Спасибо. IE действительно летит. Все-таки надо как-то с jQuery, чтобы всем хорошо было :)