CSS:how do i make a black and white image,colorful?

Question

i saw an effect in a website and i tried to write the code my self and i could. you can see it in here: click to see the effect

as you can see a black and white image becomes colorful but i only used a trick to do that.the code sets the black and white image's height to 0px while the colorful image is hidden behind it and so it is shown as we hover on the black and white image. my question is that are there any simple ways to do the same thing? or change it a little bit, for example can the color drop frop the top of image? here's my code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bgimg {
    background-image: url("1.png");
background-repeat:no-repeat;
height:190px;
-webkit-transition:0.5s;

    }
    .main{
    height:190px;

    -webkit-transition:0.5s;

    background-image: url("2.png");
background-repeat:no-repeat;
    }
    div:hover .bgimg{
    height:0px;
    }
</style>


</head>
<body>

<div class="main">
<div class="bgimg">

</div>
</div>

</body>
</html>

score 2 · Accepted Answer · answered Mar 01 '15 at 14:01

It looks pretty simple to me as you have it! If you want the colour to come from the top, just swap the image sources and the heights, so the colour image expands down instead of the b&w image shrinking up:

.main {
    height:190px;
    -webkit-transition:0.5s;
    background-image: url("http://kh-salamat-sk.ir/sweep/1.png");
    background-repeat:no-repeat;
}

.bgimg {
    background-image: url("http://kh-salamat-sk.ir/sweep/2.png");
    background-repeat:no-repeat;
    height:0px;
    -webkit-transition:0.5s;
}

.main:hover .bgimg {
    height:190px;
}

<div class="main">
    <div class="bgimg"></div>
</div>

Obviously you can use the same trick to do the same from left and right.

If you want to do more complicated transitions such as a checkerboard fade, then CSS alone probably isn't sufficient (although maybe you can do something with gradients) and you will need Javascript and probably canvas.

CSS:how do i make a black and white image,colorful?

1 Answers1