Fade out other images on hover

by lovromar

HTML

<ul>
    <li><img src="http://lorempixel.com/200/200/" alt=""></li><!-- removes whitespace
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!-- when using
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!-- display: inline-block
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!--
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!--
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!--
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!--
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!--
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!--
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!--
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li><!--
 --><li><img src="http://lorempixel.com/200/200/" alt=""></li>
</ul>

CSS

/* Base styles */

ul {
    list-style: none;
}
ul li {
    display: inline-block;
    margin-left: 5px;
    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}

/* Fade out all images when hovering the ul */

ul:hover li {
    opacity: .5;
}

/* Fade back in hovered li */

ul li:hover {
    opacity: 1;
}