Как добавить больше размытие hoverizr

Question

Привет может кто-то помочь мне с добавлением больше размытия, используя Hoverizr.min.js

Я использовал следующий код, чтобы размыть изображение, но мне нужно, чтобы размыть ее больше. Размер изображения составляет 1200 пикселей в высоту и ширину 700 пикселей.

кода я использую:

$(window).load(function() { 
$('.box1').hoverizr({effect:'blur',speedOut:'slow'}); 

и HTML является:

<img class="blur box1" src="img/img1.jpg" /> 

Любой помощи, как добавить больше размытия было бы здорово.

Answer 1

Итак, после исследования такого большого количества вариантов с размытием, я решил пойти в старую школу.

Как я это сделал, было сделано размытие изображения в фотошопе и поместить оба изображения друг на друга с абсолютным положением.

После этого было сфокусировано два изображения, одно размытие и другое. Я просто использовал параметр fadein и fadeout с jquery. И он работает плавно во всех браузерах.

Жаль, что я собирался заставить это работать с hoverizr, но, к сожалению, недостаток контента.

Answer 2

Это можно легко сделать с помощью CSS, используя the filter property. Поддержка браузера - decent, но вам потребуется резервная версия для поддержки IE.

Если ваш HTML содержит этот образ:

<img class="blur box1" src="img/img1.jpg" /> 

Вы можете добавить это в вашем CSS:

.blur { 
    filter: blur(25px); /* can be an arbitrary amount */ 
} 

.box1 { 
    transition: filter 2s ease; /* give a transition */ 
} 

.box1:hover { 
    filter: none; /* remove the blur when you hover */ 
} 

Это упрощенный пример; он использует только стандартный синтаксис фильтра. На самом деле вам нужно будет указать все префиксы поставщика для максимального удобства использования.

Here is a live demo of the effect.

Edit: Проверьте this useful blog за полезные трюки на максимальной совместимости с различными браузерами и заботиться о нескольких причуд фильтра.