CODEWITHSUNDEEP
javascriptjqueryhtmlcssblur
Olivier Lalonde
Olivier Lalonde

Reputation: 19908

Image blur with CSS/Javascript: is it possible?

Is it possible to add a blur effect to an image using CSS and Javascript?

Upvotes: 22

Views: 44908

Answers (7)

Narges
Narges

Reputation: 49

Try this:

let blur = document.querySelector("#blur");
let girlImg = document.querySelector("#girlImg");

blur.addEventListener('input', blurring);
function blurring(){
    girlImg.style.filter = `blur(${blur.value}px)`
}
<div>
  <span>Blur:</span>
  <input type="range" id="blur" min="0" max="50" value="0">
</div>

</br>

<img id="girlImg" src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" alt="girlImg" />

Upvotes: 0

Barrie Reader
Barrie Reader

Reputation: 10713

Yep, this works a treat:

Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more...

Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. This is where the "experimental" part comes into play. Canvas is only supported by some browsers and unfortunately Internet Explorer is not one of them. It is however well supported in both Firefox and Opera and support for Safari only just arrived with the recent Safari 4 (beta) release. Chrome currently works in the dev channel. A few of the effects have been simulated in IE using the age old proprietary filters. While these filters are much faster than their Canvas friends, they are few and limited. Hopefully we will one day have real Canvas on IE as well...

Upvotes: 35

Jaspreet Jolly
Jaspreet Jolly

Reputation: 1313

Using CSS

.cbp-rfgrid li:hover img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}

Upvotes: 4

Jonathan James
Jonathan James

Reputation: 219

StackBlur works: Here's how I'm using it: also, works on all browsers and ipad!! unlike webkit!!

download StackBlur v5.0 from here: StackBlurv5.0

HTML

<CANVAS ID="top"></CANVAS>
<SCRIPT TYPE="text/javascript" SRC="js/StackBlur.js"></SCRIPT>

CSS 

#top {                      
  border-radius:         28%;
  -o-border-radius:      28%;
  -webkit-border-radius: 28%;
  -moz-border-radius:    28%;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 40;
  width: 208px;
  height: 208px;
}

JS

var topCan = document.getElementById("top");
var toptx  = topCan.getContext("2d");
toptx.drawImage(_specimenImage, 0, 0);
var blur   = 0;

blur       = Math.abs(_sliderF.getPosition(8, -8)); //this returns multiple values 
                                                    //based on a new slider position

stackBlurCanvasRGB("top", 0, 0, topCan.width, topCan.height, blur);

NOTES: Radius values for the stackBlurCanvasRGB function can range from I think 100 to -100.. just play with values, you'll get it working. ..CanvasRGB works faster than CanvasRGBA on iPad.. least that's what I'm noticing on iPad 4th gen.

Upvotes: 2

Raj Nandan Sharma
Raj Nandan Sharma

Reputation: 3862

With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image. For Chrome

See live demo and complete source code here

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

See the following code for more details.

To make an image gray:

img {
 -webkit-filter: grayscale(100%);
}

To give a sepia look:

img {
 -webkit-filter: sepia(100%);
}

To adjust brightness:

img {
 -webkit-filter: brightness(50%);
}

To adjust contrast:

img {
 -webkit-filter: contrast(200%);
}

To Blur an image:

img {
 -webkit-filter: blur(10px);
}

Upvotes: 1

Luckylooke
Luckylooke

Reputation: 4539

This is also good to consider:

http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

Upvotes: 5

Quasimondo
Quasimondo

Reputation: 2545

Alternatively you could use StackBlur or Superfast Blur

Upvotes: 15

Related Questions