Animation

Discussion in 'Website Development & Design' started by sudhakar1, Oct 15, 2013.

  1. sudhakar1

    sudhakar1
    uix_expand uix_collapse
    Member

    Joined:
    Sep 9, 2013
    Messages:
    150
    Likes Received:
    6
    How to create a image fade in css code?can one help me?
     
  2. kevinkrieger

    kevinkrieger
    uix_expand uix_collapse
    Member

    Joined:
    Sep 5, 2013
    Messages:
    201
    Likes Received:
    7
    Hope this help :
    img {opacity:0;
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
    }​
     
  3. andrewc

    andrewc
    uix_expand uix_collapse
    Member

    Joined:
    Nov 12, 2013
    Messages:
    175
    Likes Received:
    21
    If you are talking about an image fading as an animation you may have to resort to some JavaScript. However you can make the image change if the user hovers over the image with their cursor. For instance, you can take the above code and then add:
    img hover{
    opacity:0;
    -moz-transition: opacity 10s;
    -webkit-transition: opacity 10s;
    -o-transition: opacity 10s;
    transition: opacity 10s;
    }​
     

Share This Page