Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Cross fading images with the help of css

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 295
    Comment on it

    We have seen in many image galleries  and in many websites that when we take our cursor into the image it gets faded out and other image come in its place , this effect is called cross fading image effect. we can achieve it by simply using css without using any jQuery code.

    First we need two images for this cross fading image effect. We have to  ensure they are the same size.

    Then we have to make a div and put these images into it.

    Below is the html code for doing that:-

    <html>
    <head>
    <title>Cross fading image effect</title>
    </head>
    <body>
    <div class="wrapper">  
    <img class="image1" style="position: absolute;" src="background1.jpg" alt="">  
    <img class="image2" src="background2.jpg" alt="">  
    </div>
    </body>
    </html>  

    Then we have to use below  css code :-

    .wrapper img { transition: 1s ease-in-out; }  
    img.image1, div.changer:hover img.image2 { opacity: 1.0; }   
    .wrapper:hover img.image1, img.image2 { opacity: 0; }  

    In above css  code first we are placing images over each other and then we are  changing their opacity on hover.

    File attach with this blog contains working demo of the cross fading image effect.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: