Edit in JSFiddle

<figure>
  <img src="http://farm6.staticflickr.com/5449/7226439182_756e2b00e6.jpg" alt="">
</figure>

<figure>
  <img src="https://lh6.googleusercontent.com/-VM4xja4XHUk/TWiMvgvcPyI/AAAAAAAABD4/yusvAbLf1jM/s511/DSC02130.JPG" alt="" style="width:500px; height:338px;">
</figure>

figure {
  box-shadow:inset 0 0 100px rgba(0,0,20,0.7), 0 5px 15px rgba(0,0,0,0.5);
  background:linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
  width:500px; height:338px; }

figure img { 
    -webkit-filter:sepia(20%) brightness(10%) contrast(130%);
  transition:-webkit-filter 0.3s ease-in-out;
    position:relative; z-index:-1; }

figure:hover { background:none; }
figure:hover img { -webkit-filter:sepia(0%) brightness(0%) contrast(100%); }

/* FRILLS */
body { background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png) repeat; }
figure { margin:20px auto; }