Search code examples
javascriptcssanimationslideshowfading

Fading photos in slideshow using CSS

I have a website, and a slideshow of pictures on the main page. Before a photo is removed, I write the next photo behind it and then remove it. I wanted to know how I can add a fading effect before the photo is removed. my website is: guyzyl.org, so you can check out what im talking about. Also I dont know how to use Jquery, so please dont offer that solution. Thanks for any help. Guy Z.

Solution 
  • .photo{
    -webkit-transition: opacity .5s ease-in-out;  /*Webkit*/
    -moz-transition: opacity .5s ease-in-out;  /*Firefox*/
    -o-transition: opacity .5s ease-in-out;  /*Opera*/
    transition: opacity .5s ease-in-out;  /*CSS3 Standard*/
    opacity: 1;
}
.photo.fade{
    opacity: 0;
}

document.querySelector(".photo").classList.add("fade");

    See Demo: http://jsfiddle.net/DerekL/jzLZZ/