Blur effect items on hover

by Eli Marudi

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

/* Blur Effect */

ul {
    height: 200px;
    list-style: none;
    margin: 100px auto;
    width: 400px;
}
li {
    background: red;
    float: left;
    height: 80px;
    margin: 0 20px 20px 0;
    width: 80px;
    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}
ul:hover li {
    box-shadow: 0 0 15px 5px red;
    opacity: .25;
    -webkit-transform: scale(.8);
       -moz-transform: scale(.8);
        -ms-transform: scale(.8);
         -o-transform: scale(.8);
            transform: scale(.8);
}
ul li:hover {
    box-shadow: none;
    opacity: 1;
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
}