Write an article or Share a link

How to disolve image in css with transition effect?

11 months ago
How to disolve image in css with transition effect? by html hints

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

Hover image to see effect

Disolve Image using CSS3 filter Property
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

Hover image to see effect

Disolve multiple Image using CSS techniques Disolve multiple Image using CSS techniques
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;
    }
CSS