<div class='instructions'>
  <p><strong>Resimleri renkle kaplamak için;</strong> Kırmızı için <strong>R</strong>,Yeşil için <strong>G</strong>, Mavi için <strong>B</strong> tuşlarına basabilirsiniz.<br>
    <strong>Resimleri değiştirmek için;</strong>
Ağaç resimi için <strong>T</strong>, 
Bisiklet resimi için <strong>C</strong> tuşlarına basabilirsiniz.</p>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
<div class='wrapper'>
  <img src='http://3.t.imgbox.com/uDtDYUuo.jpg'>
  <div class='overlay'></div>
</div>
body {
  font-family: 'Roboto Light';
  text-align: center;
}

.instructions{
  text-align: left;
  line-height: 1.3;
  font-size: 1.3em;
  color: white;
  background: black;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

p{
  margin: 0;
}

.wrapper {
  position: relative;
  max-width: 100%;
  width: 200px;
  height: 130px;
  display: inline-block;
  background: white;
  border: 2px solid black;
}

img {
  width: 100%;
  height: 100%;
}

.wrapper:nth-of-type(1) .overlay {
  mix-blend-mode: normal;
}

.wrapper:nth-of-type(1):after {
  content: 'normal';
}

.wrapper:nth-of-type(2) .overlay {
  mix-blend-mode: multiply;
}

.wrapper:nth-of-type(2):after {
  content: 'multiply';
}

.wrapper:nth-of-type(3) .overlay {
  mix-blend-mode: screen;
}

.wrapper:nth-of-type(3):after {
  content: 'screen';
}

.wrapper:nth-of-type(4) .overlay {
  mix-blend-mode: overlay;
}

.wrapper:nth-of-type(4):after {
  content: 'overlay';
}

.wrapper:nth-of-type(5) .overlay {
  mix-blend-mode: darken;
}

.wrapper:nth-of-type(5):after {
  content: 'darken';
}

.wrapper:nth-of-type(6) .overlay {
  mix-blend-mode: lighten;
}

.wrapper:nth-of-type(6):after {
  content: 'lighten';
}

.wrapper:nth-of-type(7) .overlay {
  mix-blend-mode: color-dodge;
}

.wrapper:nth-of-type(7):after {
  content: 'color-dodge';
}

.wrapper:nth-of-type(8) .overlay {
  mix-blend-mode: color-burn;
}

.wrapper:nth-of-type(8):after {
  content: 'color-burn';
}

.wrapper:nth-of-type(9) .overlay {
  mix-blend-mode: hard-light;
}

.wrapper:nth-of-type(9):after {
  content: 'hard-light';
}

.wrapper:nth-of-type(10) .overlay {
  mix-blend-mode: soft-light;
}

.wrapper:nth-of-type(10):after {
  content: 'soft-light';
}

.wrapper:nth-of-type(11) .overlay {
  mix-blend-mode: difference;
}

.wrapper:nth-of-type(11):after {
  content: 'difference';
}

.wrapper:nth-of-type(12) .overlay {
  mix-blend-mode: exclusion;
}

.wrapper:nth-of-type(12):after {
  content: 'exclusion';
}

.wrapper:nth-of-type(13) .overlay {
  mix-blend-mode: hue;
}

.wrapper:nth-of-type(13):after {
  content: 'hue';
}

.wrapper:nth-of-type(14) .overlay {
  mix-blend-mode: saturation;
}

.wrapper:nth-of-type(14):after {
  content: 'saturation';
}

.wrapper:nth-of-type(15) .overlay {
  mix-blend-mode: color;
}

.wrapper:nth-of-type(15):after {
  content: 'color';
}

.wrapper:nth-of-type(16) .overlay {
  mix-blend-mode: luminosity;
}

.wrapper:nth-of-type(16):after {
  content: 'luminosity';
}

.wrapper:after {
  position: absolute;
  bottom: 10px;
  left: 3px;
  color: #fff;
  font-size: 1em;
  font-family: 'Lato';
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.8);
  padding: 3px 6px;
  border-radius: 2px;
}

img {
  display: block;
  max-width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(200,150,0,0.8);
}
$("body").keydown(function(event) {
  if (event.which == 84) {
    $("img").attr("src", "http://2.t.imgbox.com/b5xmGhuj.jpg");
  }
  if (event.which == 67) {
    $("img").attr("src", "http://3.t.imgbox.com/tNBMrWWI.jpg");
  }
  if (event.which == 71) {
    $(".overlay").css("background", "rgba(0,255,0,0.6)");
  }
  if (event.which == 82) {
    $(".overlay").css("background", "rgba(255, 0, 0, 0.6)");
  }
  if (event.which == 66) {
    $(".overlay").css("background", "rgba(0, 0, 255, 0.6)");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js