html - How can I get my images to fade out?

Question

On my portfolio page I currently have on the images:

.collection-type-gallery #slideshow .slide img:hover {
     opacity: 1;
     -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
     -o-transition: opacity 1s ease-in-out;
     transition: opacity 1s ease-in-out;
}

But its not fading back out. They only fade in. How can i get it to work properly?

Answer 1

Remove :hover from transition declaration:

.collection-type-gallery #slideshow .slide img { /* Set the transition on img without hover */
    -webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out; 
}

.collection-type-gallery #slideshow .slide img:hover{opacity:1;} /* apply opacity change on hover */

The problem is you attached the transition only to img:hover, so when you take your mouse off it, the transition doesn't apply anymore, set the transition on the img without :hover, then only assign opaicty:1 to img:hover