Create grayscale effect starting from bottom to top in css3

Question

I need to take a grayscale shot on rgba using CSS. I know I can change it with CSS3, but I need smooth animation. I need to fill the color from bottom to top using animation. I attach the image to make it clear.

Please check this fiddle , this is what I have done so far.

HTML :

<img src="http://static.wallpedes.com/wallpaper/resolution/resolution-of-wallpaper-pictures-with-green-eyes-hd-best-girls-full-hd-wallpapers-wallpaper-site-for-mobile-android-download-facebook-2012-app-in-the-world.jpg"/>

CSS :

img {
  -webkit-animation: mymove 5s;
  -moz-animation: mymove 5s;
  -ms-animation: mymove 5s;
  animation: mymove 5s;
  width: 400px;
}
@-webkit-keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
@-moz-keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
@-ms-keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
/* Standard syntax */

@keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}

Thanks in advance.

Answer 1

Try this css solution:

img.gray { 
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 
}
.box {
  width: 350px;
  height: 200px;
  position: relative;
}
img {
  width: 350px;
  height: 200px;
  position: absolute;
  bottom: 0;
}
.box-color {
  overflow: hidden;
  width: 350px;
  position: absolute;
  height: 0;
  left: 0;
  bottom: 0;
  -webkit-transition: height 2s; 
  transition: height 2s;
  z-index: 1;
}
.box:hover .box-color {
  height: 100%;
}

<div class="box">
  <div class="box-color">
    <img src="http://lorempicsum.com/futurama/350/200/1" alt="" class="color" />
    </div>
  <img src="http://lorempicsum.com/futurama/350/200/1" alt="" class="gray" />
</div>

Run codeHide result