Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <img id="imagetoblur" src="http://deadflagblu.es/img/uploads/izetta,-the-last-witch,-midseason-review/mpv_screenshot1374.jpg">
  <button id="buttontoblur">Do a little magic trick!</button>
</body>
</html>
 
img{
  width:80vw;
  filter:blur(0px);
}
img,button{
  display:block;
  position:relative;
  margin:20px auto;
}
 
(function(){
  "use strict";
  var blur = false;
  var blurbutton = document.getElementById("buttontoblur");
  blurbutton.addEventListener("click",function(){
    blur = blurIzetta(blur);
  });
  
  function blurIzetta(bool)
  {
    var izetta = document.getElementById("imagetoblur");
    if (bool == false)
    {
      bool = true;
      izetta.style.filter="blur(20px)";
    }
    else
    {
      bool = false;
      izetta.style.filter="blur(0px)";
    }
    return bool;
  }
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Yeasayerpro
0viewers