CSS3 Image Wall

Nice technique for an image wall using CSS3. When you hover over an image, all images fade out except for the one you hover over.

<ul id="photo-wall">
    <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
    <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
    <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
    <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
    <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
    <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
    <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
    <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
    <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
</ul>
#photo-wall{ 
    margin: 0 0 30px 0; 
    padding: 0; 
    max-width: 600px; 
    list-style: none; 
    overflow: hidden; 
}

#photo-wall li{ 
    float: left; 
    width: 33.3333%; 
    overflow: hidden;
}

#photo-wall li img{ 
    display: block;     
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent; 
    -webkit-transition: opacity 0.5s ease-out;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.5s ease-out;  /* FF4+ */
        -ms-transition: opacity 0.5s ease-out;  /* IE10 */
         -o-transition: opacity 0.5s ease-out;  /* Opera 10.5+ */
            transition: opacity 0.5s ease-out;
}

#photo-wall:hover img{ 
    opacity: .5;  
}

#photo-wall li:hover img{ 
    opacity: 1; 
}

.oldie #photo-wall:hover img{ 
    filter: alpha(opacity=50); /* for older versions of IE */
}

.oldie #photo-wall li:hover img{ 
    filter: alpha(opacity=100); /* for older versions of IE */
}