Edit in JSFiddle

<div class="bingkai">
  <img src="https://goo.gl/pXqVmV">
  <p>tanpa efek</p>
</div>
<div class="bingkai">
  <img class="grayscale" src="https://goo.gl/pXqVmV">
  <p>grayscale</p>
</div>
<div class="bingkai">
  <img class="sepia" src="https://goo.gl/pXqVmV">
  <p>sepia</p>
</div>
<div class="bingkai">
  <img class="saturate" src="https://goo.gl/pXqVmV">
  <p>saturate</p>
</div>
<div class="bingkai">
  <img class="hue-rotate" src="https://goo.gl/pXqVmV">
  <p>hue-rotate</p>
</div>
<div class="bingkai">
  <img class="invert" src="https://goo.gl/pXqVmV">
  <p style="color:#f2f2f2 !important;">invert</p>
</div>
<div class="bingkai">
  <img class="opacity" src="https://goo.gl/pXqVmV">
  <p>opacity</p>
</div>
<div class="bingkai">
  <img class="brightness" src="https://goo.gl/pXqVmV">
  <p style="color:#fbfbfb !important;">brightness</p>
</div>
<div class="bingkai">
  <img class="contrast" src="https://goo.gl/pXqVmV">
  <p>contrast</p>
</div>
<div class="bingkai">
  <img class="blur" src="https://goo.gl/pXqVmV">
  <p>blur</p>
</div>
<div class="bingkai">
  <img class="tint" src="https://goo.gl/pXqVmV">
  <p>tint</p>
</div>
<div class="bingkai">
  <img class="gabungan" src="https://goo.gl/pXqVmV">
  <p>gabungan</p>
</div>

.bingkai {
  position: relative;
  width: 150px;
  display: inline-block;
  padding: 4px;
  margin: 15px 75px 0 15px;
}
.bingkai img {
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  box-shadow:3px 3px 3px 3px #777;
}
.bingkai p {
  position: absolute;
  text-align: center;
  width: 130%;
  height: 8.5%;
  bottom: 0px;
  font: 400 18px/1 'Kaushan Script', cursive;
  color: #666;
}
.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}
.saturate {
    -webkit-filter: saturate(4);
    filter: saturate(4);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}
.invert {
    -webkit-filter: invert(.8);
    filter: invert(.8);
}
.opacity {
    -webkit-filter: opacity(.5);
    filter: opacity(.5);
}
.brightness {
    -webkit-filter: brightness(.5);
    filter: brightness(.5);
}
.contrast {
    -webkit-filter: contrast(3);
    filter: contrast(3);
}
.blur {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}
.tint {
    -webkit-filter: sepia(1) hue-rotate(200deg);
    filter: sepia(1) hue-rotate(200deg);
}
.gabungan {
    -webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);
    filter: contrast(1.4) saturate(1.8) sepia(.6);
}