How to animate image over other image in Css or Javascript?

Question

Lets say First image is black & white. Second image is colored. After some timeout B/W image should change to colored image..with animation just like loading progress bars? how can I do this using Css or JavaScript ?

[Added for clarity from a comment by the OP, below]

OP: is it possible with some slow linear kind of animation ?? like filling water in glass..color filling in b/w image ?

Possible duplicate of [jQuery: there is a way to apply colour (tint) to an image?](http://stackoverflow.com/questions/4416007/jquery-there-is-a-way-to-apply-colour-tint-to-an-image) — Justinas, Feb 24 '17 at 07:55
Use only one image and apply jQuery filtering function for it. — Justinas, Feb 24 '17 at 07:55
The OP has explained more clearly in a comment below the effect they wish to achieve: _is it possible with some slow linear kind of animation ?? like filling water in glass..color filling in b/w image ?_ — Rounin, Feb 25 '17 at 09:39

Mario A · Answer 1 · 2017-02-24T07:57:04.340

first place two images above each other using position: absolute;. With background images you can do it like this:

<div class="container">
  <div class="image1"></div>
  <div class="image2" id="image_resize"></div>
</div>

CSS:

.container {
  position: relative;
  width: 300px;
  height:200px;
}

.image1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(http://images.freeimages.com/images/previews/cf6/bird-1394216.jpg);
  background-repeat: no-repeat;
}

.image2 {
  position: absolute;
  height: 100%;
  background-image: url(http://images.freeimages.com/images/previews/4f3/apple-1322812.jpg);
  background-repeat: no-repeat;
}

To animate the second image, the easiest way is to use jquerys animate. With pure javascript you could do something like this:

var percent = 0; // this will count from 0 to 100, defining the with in percent

/* with setinterval you can call a function periodically, in this example every 50 milliseconds */
var myInterval = window.setInterval(function() {
    /* find the image that should get resized by id */
    var img = document.getElementById('image_resize');

    /* set the with of the image */
    img.style.width = percent+"%";

    /* increment by 1 percent */
    percent ++;

    if(percent > 100) {
      /* when 100% is reached, stop the interval */
      clearInterval(myInterval);
    }
}, 50);

Here is a working jsfiddle: https://jsfiddle.net/c51u6r8t/

dodov · Answer 2 · 2017-02-24T08:02:56.323

You can put the black-white image on top of the colored one at full opacity and simply fade out the black-white image when you want.

setTimeout(function() {
  document.getElementById("container").className = "revealed";
}, 500);

#container {
  position: relative;
}

#container .overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  transition: opacity 1.5s ease-in-out;
}

#container.revealed .overlay {
  opacity: 0;
}

<div id="container">
  <img src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2003/10/soho_image_28_october_2003/10098404-2-eng-GB/SOHO_image_28_October_2003_node_full_image_2.jpg">
  <img class="overlay" src="http://dawn.jpl.nasa.gov/multimedia/images/dawn-image-070911.jpg">
</div>

Fiddle

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

Second attempt

I understand better what you are trying to achieve now. This can be achieved with an animation on an ::after pseudo-element.

Working Example:

div {
position: relative;
width: 190px;
height: 190px;
background-image:url('http://placekitten.com/190/190');
}

div::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 190px;
background-image:url('http://placekitten.com/190/190');
opacity: 0;
filter: grayscale(100%);
animation: waterfill 5s linear;
}

@keyframes waterfill {
0% {height: 190px; opacity: 1;}
20% {height: 190px; opacity: 1;}
100% {height: 0; opacity: 1;}
}

<div></div>

First attempt:

You can use a CSS @keyframes animation like this:

img {
width: 190px;
height: 190px;
filter: grayscale(0%);
animation: colorImage 5s linear;
}


@keyframes colorImage {
0% {filter: grayscale(100%);}
80% {filter: grayscale(100%);}
100% {filter: grayscale(0%);}
}

<img src="http://placekitten.com/190/190" />

The animation takes 5 seconds in total.

For the first 4 seconds, the image is black and white.

During the last second, the image transitions to full color.

is it possible with some slow linear kind of animation ?? like filling water in glass..color filling in b/w image ? — Sanjay B, Feb 25 '17 at 05:56

score 0 · Answer 4 · answered Feb 24 '17 at 08:03

I hope this code helps

<script type="text/JavaScript">
var picCount=0; // global
var picArray= ["Header1.png","Header1.jpg"] 
// Replace your original image names here
// gets next picture in array
function nextPic()
{ // check if adding 1 exceeds number of pics in array
picCount=(picCount+1<picArray.length)? picCount+1 : 0;
// build the img to write to page using the new pic reference
var build='<img border="0" src="'+picArray[picCount]+'" width="200" height="200">';
document.getElementById("imgHolder").innerHTML=build;
// repeat this after a puse of 2000ms (2sec).
setTimeout('nextPic()',2000)
}
</script>

Add this to your html page

<body onload="setTimeout('nextPic()',2000)">
<div id="imgHolder">
<img border="0" src="Header1.jpg" width="300" height="300">
</div>

score 0 · Answer 5 · answered Feb 24 '17 at 08:06

If I assumed correctly, the first image is desaturated version of the second image so only one image is needed here: the colored one. To turn it into a bw image simply use grayscale filter:

img.desaturate {
    filter: grayscale(100%);
}

and add this class to your image:

<img id="myimage" src="image.jpg" class="desaturate">

if you want an "animation" you can forget the classes and dynamically add the style via jQuery:

$("#myimage").css("style","filter: grayscale("+(bytesLoadeed/bytesTotal*100)+"%);");

How to animate image over other image in Css or Javascript?

5 Answers5

Fiddle

Second attempt

First attempt: