Create gray scale effect starting from bottom to top in css3

Question

I need to make a picture from gray scale to rgba with CSS. I know I can change it with CSS3, But I need a smooth animation there. I need to fill the color from bottom to top with an animation. I am attaching an image to make it clear.

Please check this fiddle, this is what I did 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>