blur или размытие картинки

@Mr.Whiteart · Регистрация: 23.02.2012

Студворк — интернет-сервис помощи студентам

нужно,чтоб при наведении курсором на картинку она размывалась,видел такие махинации с текстом,скачивал исходники,но с картинками они не работают,как сделать такой эффект?

@and_y87 · 15.01.2013, 14:20

Mr.Whiteart, можно при наведении применить кко нибудь эффект, но как таковой эффект размытия не встречал ни разу...

@Soldado · 15.01.2013, 14:40

Можно каждую картинку поместить в блок такого же размера. Фоном этого блока поставить размытую копию картинки (размытую картинку можно легко получить в FSViewer'е). Затем несколько строчек скрипта: при наведении на блок, картинка в нём становиться прозрачной, а значит виден размытый фон.

JavaScript
1
2
3
4
$('.imgBlock').hover(
function(){$(this).children("img").fadeOut(200)},
function(){$(this).children("img").fadeIn(200)}
);

Таких вот блоков может быть много, но у каждого свой id - через него в стилях задаём фон блока:

HTML5
1
2
3
<div class="imgBlock" id="img1">
                  <img src="images/1.jpg" />
</div>

CSS
1
2
3
#img1{
background-image:url("images/1blur.jpg");
}

Демо-страница

@and_y87 · 15.01.2013, 14:49

Soldado, ээээээээээй.... так не честно... это легко...
я бы тоже до этого догадался...

думалось мне Автору надо на JS размазать картинку...

@Mr.Whiteart · 15.01.2013, 18:44 **[ТС]**

Soldado, да я тоже думал про размытие второй картинки,но это не удобно,вдруг администратору сайта нужно будет поменять картинки,этож ему нужно будет в PS размывать,тем более если картинок много,то вообще геморойно)),надо искать что-то другое

Добавлено через 40 минут
так я нашел,команду в css,чтоб делала размытие,вот только теперь почему-то не могу применить изменения в css
пишу так

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
      
      $("#slyshow_1").mouseover(function(){
      $("this").css({"filter":"blur(0px)"});
      });
      });

пробовал применить какое другое изменение в ксс не хочет ничего делать

вот мой js полностью

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function function_1() {
    
$("#slyshow_b1").fadeIn("slow").delay(5000).fadeOut("slow",function(){
$("#slyshow_b2").fadeIn("slow").delay(5000).fadeOut("slow",function(){
    $("#slyshow_b3").fadeIn("slow").delay(5000).fadeOut("slow",function(){
$("#slyshow_b4").fadeIn("slow").delay(5000).fadeOut("slow",function(){
    $("#slyshow_b5").fadeIn("slow").delay(5000).fadeOut("slow",function(){
$("#slyshow_b6").fadeIn("slow").delay(5000).fadeOut("slow",function(){
$("#slyshow_b7").fadeIn("slow").delay(5000).fadeOut("slow",function_1);
 
});
});
});
});
});
});
});
function_1();
 
 
 $(document).ready(function(){
      
      $("#slyshow_1").mouseover(function(){
      $("this").css({"filter":"blur(0px)"});
      });
      });

@Soldado · 15.01.2013, 19:08

filter:blur - не поддерживается основными браузерами.
Может от размытия отказаться в пользу затенения картинки? Это сделать можно легко.

@Mr.Whiteart · 15.01.2013, 19:25 **[ТС]**

да,вы наверное правы,все таки в опере размытасть не видна,только хром,а про затенение вы имели в виду FadeTo?

@Soldado · 15.01.2013, 19:37

Я имел ввиду - при наведении: поверх картинки показывать полупрозрачный блок, тем самым затеняя картинку.
Демо-страница.

@ntfs1984 · 16.01.2013, 22:06

Смотри в сторону html5 canvas

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Mr.Whiteart 4 / 4 / 0 Регистрация: 23.02.2012 Сообщений: 93

	blur или размытие картинки 15.01.2013, 13:01. Показов 9506. Ответов 8 Метки нет (Все метки) нужно,чтоб при наведении курсором на картинку она размывалась,видел такие махинации с текстом,скачивал исходники,но с картинками они не работают,как сделать такой эффект? 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	15.01.2013, 14:20
	Mr.Whiteart, можно при наведении применить кко нибудь эффект, но как таковой эффект размытия не встречал ни разу... 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	15.01.2013, 14:49
	Soldado, ээээээээээй.... так не честно... это легко... я бы тоже до этого догадался... думалось мне Автору надо на JS размазать картинку... 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	15.01.2013, 19:08
	filter:blur - не поддерживается основными браузерами. Может от размытия отказаться в пользу затенения картинки? Это сделать можно легко. 0

@Mr.Whiteart 4 / 4 / 0 Регистрация: 23.02.2012 Сообщений: 93
	15.01.2013, 19:25 [ТС]
	да,вы наверное правы,все таки в опере размытасть не видна,только хром,а про затенение вы имели в виду FadeTo? 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	15.01.2013, 19:37
	Я имел ввиду - при наведении: поверх картинки показывать полупрозрачный блок, тем самым затеняя картинку. Демо-страница. 0

@ntfs1984 6 / 6 / 1 Регистрация: 25.07.2011 Сообщений: 68
	16.01.2013, 22:06
	Смотри в сторону html5 canvas 0