effek zoom,blur

Kode CSS:

body {
    font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
    font-size: 13px;
}

ul {
    list-style: none;
    width: 570px;
    margin: 40px auto;
}

li {
    width: 120px;
    height: 125px;
    float: left;
    background: #4797CF;
    margin: 0 40px 40px 0;
   
    padding: 10px;
    border: 5px solid #ECECEC;
   
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
li h1 {
    font-size: 16px;
    margin: 0 0 10px 0;
    color: #A2CBE7;
}
li p {
    color: #fff;
}

ul li:hover {
    border: 5px solid white;
   
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.3);
   
    opacity: 1;
    filter: alpha(opacity=100);
}
ul:hover li:not(:hover) {
    opacity: .3;
    filter: alpha(opacity=30);
   
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
}

Kode HTML:

<ul>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
</ul>