CSS filter effects

Demo

langsung saja

CSS

    .gallery{
      list-style: none;
      margin:0px auto; padding: 0;
      width: 700px;
      font-size: 0;
    }


    .gallery li{
        display: inline-block;
        *display: inline;
        zoom: 1;
        width: 300px; height: 220px;
        margin:1%;
        border: 5px solid #fff;
        -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
        box-shadow: 0 2px 2px rgba(0,0,0,.1);
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;      
    }
    .gallery img {width:100%; height:220px;}

    .gallery:hover li:not(:hover){    
        -webkit-filter: blur(2px) grayscale(1);
        -moz-filter: blur(2px) grayscale(1);
        -o-filter: blur(2px) grayscale(1);
        -ms-filter: blur(2px) grayscale(1);
        filter: blur(2px) grayscale(1);
        opacity: .7; /* fallback */      
    }

 HTML

  <ul class="gallery">
      <li><img src="alamat-gambar.jpg"></li>
      <li><img src=" alamat-gambar.jpg "></li>
      <li><img src=" alamat-gambar.jpg "></li>
      <li><img src=" alamat-gambar.jpg "></li>
      <li><img src=" alamat-gambar.jpg "></li>
      <li><img src=" alamat-gambar.jpg "></li>  

  </ul>

Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 22.23 and have 14 komentar