"Filter Demo With Image | Javascript Filter"
Bootstrap 3.3.0 Snippet by vijaysasavadiya

Post to Facebook Tweet this

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
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid zero-pad div-header">
<h2 class="text-center" style="color:#FFFFFF;background-color:black;margin:0;padding-bottom:20px;padding-top:20px">CSS Filter Demo</h2>
</div>
<div class="container-fluid zero-pad div-content">
<div class="col-sm-7 zero-pad">
<img id="demoImg" class="img-responsive img" src="http://landing.hidoctor.ir/pages/monaliza/assets/img/1.jpg" alt="Image not found..."/>
<a class="btn btn-square-to-round btn-bordered-warning resetBtn"><span class="glyphicon glyphicon-repeat" onclick="imgReset()"></span></a>
</div>
<div class="col-sm-5">
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-6">Grayscale</label>
<div class="col-xs-6">
<input id="Grayscale" class="form-control input-sm" placeholder="Grayscale" type="number" min="0" max="1" step="0.05" value="0" onchange="imgFilter()"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-6">Sepia</label>
<div class="col-xs-6">
<input id="Sepia" class="form-control input-sm" placeholder="Sepia" type="number" min="0" max="1" step="0.05" value="0" onchange="imgFilter()"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-6">Saturate</label>
<div class="col-xs-6">
<input id="Saturate" class="form-control input-sm" placeholder="Saturate" type="number" min="0" max="1" step="0.05" value="1" onchange="imgFilter()"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-6">Hue-Rotate</label>
<div class="col-xs-6">
<input id="HueRotate" class="form-control input-sm" placeholder="Hue-Rotate" type="number" min="0" max="360" step="5" value="0" onchange="imgFilter()"/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.form-horizontal{padding-top:20px}
.zero-pad{padding:0}
.zero-margin{margin:0}
.btn-bordered-warning{color:#F0AD4E;background:transparent;border:3px solid #F0AD4E;border-radius:0}
.btn-bordered-warning:hover{color:#FFFFFF;border:3px solid #FFFFFF}
.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33}
.btn-square-to-round:hover{border-radius:50px}
.btn,img{transition:all 0.8s;-o-transition:all 0.8s;-moz-transition:all 0.8s;-webkit-transition:all 0.8s;}
.resetBtn{position:absolute;top:10px;right:10px}
.kbd{border-radius:6px 6px 0 0;}
.img{padding:8px};
.cssCode{border-radius:0 6px 6px 6px}
.div-header{margin:15px 15px 0px 15px;border-bottom:0px;border-top:3px solid #F0AD4E;border-right:3px solid #5CB85C;border-bottom:0px;border-left:3px solid #D9534F}
.div-content{margin:0px 15px 15px 15px;background:#F7F7F9;border-top:3px solid #428BCA;border-right:3px solid #D9534F;border-bottom:3px solid #5CB85C;border-left:3px solid #F0AD4E}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
27
28
29
30
31
32
33
34
35
36
37
function imgFilter()
{
var image = document.getElementById('demoImg');
var grayscale = document.getElementById('Grayscale').value;
var Sepia = document.getElementById('Sepia').value;
var Saturate = document.getElementById('Saturate').value;
var HueRotate = document.getElementById('HueRotate').value;
var Invert = document.getElementById('Invert').value;
var Opacity = document.getElementById('Opacity').value;
var Brightness = document.getElementById('Brightness').value;
var Contrast = document.getElementById('Contrast').value;
var Blur = document.getElementById('Blur').value;
var CssCode = document.getElementById('cssCode');
image.style="filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px)";
image.style="-o-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px)";
image.style="-moz-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px)";
image.style="-webkit-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px)";
CssCode.innerHTML="filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px);";
CssCode.innerHTML+="\n"+"-o-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px);";
CssCode.innerHTML+="\n"+"-moz-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px);";
CssCode.innerHTML+="\n"+"-webkit-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px);";
}
function imgReset()
{
var image = document.getElementById('demoImg');
document.getElementById('Grayscale').value="0";
document.getElementById('Sepia').value="0";
document.getElementById('Saturate').value="1";
document.getElementById('HueRotate').value="0";
document.getElementById('Invert').value="0";
document.getElementById('Opacity').value="1";
document.getElementById('Brightness').value="1";
document.getElementById('Contrast').value="1";
document.getElementById('Blur').value="0";
var CssCode = document.getElementById('cssCode');
image.style="filter:none";
image.style="-webkit-filter:none";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System
Image Crop jQuery
Filter elements, sidebar filter panel bootstrap 4
Easy Table Filter

Questions / Comments: