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

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

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

	blur или размытие картинки 15.01.2013, 13:01. Показов 9556. Ответов 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