Search code examples
csscolorsrgbrgba

CSS RGBA Color code for grayscale image to colorised image

I want to create simple hover effect by CCS3 like Default Image is black and white, but when I hover to this image actual colors of this image will be shown.

Please help me

Solution

  • You could use a new property filter but broswer support is not super deep (See http://caniuse.com/css-filters)

    JSfiddle Demo

    CSS

    img {
    -webkit-filter:grayscale(100%);
}

img:hover {
    -webkit-filter:none;
}

    Alternative Method

    This requires a wrapping div and a second color background image

    JSfiddle

    HTML

    <div class="wrap">
    <img src="http://lorempixel.com/output/abstract-q-g-250-250-8.jpg" alt=""/>
 </div>

    CSS

    .wrap {
    display: inline-block;
    background-image: url(http://lorempixel.com/output/abstract-q-c-250-250-8.jpg);
}

img {
    display: block;
}

.wrap img:hover {
    opacity:0;
}