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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

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

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