How to disolve image in css with transition effect?

How to disolve image in css with transition effect?

---

# Disolve Image using CSS3 filter Property

The filter property of <img> tag defines effects (like blur & saturation).

There are vairous filter Functions() that use for effect to its element. grayscale() is one of the function which is used to turn image into black & white or grey. Values for greyscale() function is varies between 0% to 100%, Where 0% (0) is default & represents the original image. 100% will make the image completely gray (used for black and white images). Negative (-0) values are not allowed.

Example of greyscale() effect for dissolve effect into black & white to orignal image

Source Code

HTML

    <img src="image-path" alt=""/>

CSS

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

# Disolve multiple Image using CSS techniques

Previous example describe's basic use of greyscale(). In this, example i'm going to tell you more about that how you can do Dissolve effect without using filter property & greyscale(). In this example, I'm going to use two images & will demonstrate that how you can dissolve two images on hover with transition effect.

Example of dissolve effect of two images with transition on hover

Source Code

HTML

    <figure>
        <img  class="on-hover__front-image" src="image-path-1" alt="">
        <img src="image-path-2" alt="">
    </figure>

CSS

    .on-hover img {
        position: absolute;
        overflow: hidden;
    }
    .on-hover .on-hover__front-image {
        z-index: 9;
        transition: opacity .5s linear;
        cursor: pointer;
    }
    .on-hover:hover > .on-hover__front-image{
        opacity: 0;
    }