JSFiddle - React, Tailwind, and code Playground

by Wesley Smith

HTML

<div class="imageBox"></div>

CSS

div.imageBox {
  width: 200px;
  height: 200px;
  background-image: url(http://goo.gl/0VTd9W);
  background-size: cover;
  border: 1px solid black;
  overflow: hidden;
}

JavaScript

$.fn.MyApp = function(options) {
  var defaults = {
    background: '#000',
    foreground: 'red',
    blur: '10px'
  };
  var options = $.extend(defaults, options);
  this.css("-webkit-filter", "blur(" + options.blur + ")");
  
};
$('.imageBox').MyApp({blur:'5px'}); // here the 5px will override the 10px default