Blur To Fokus Gallery

Halo sobat blogger,Ketemu lagi nih bersama saya Mas Uya.Dipost ini saya ingin membuat post yang berjudul Blur To Fokus Gallery.
Banyak yang meminta gallery yang saya buat,Nah kali ini saya akan share sebuah gallery hanya menggunakan CSS dan memiliki effect yang tidak kalah bagus dengan menggunakan JS.

Nah untuk mengeditnya silahkan ikuti langkah berikut:
Tutorial Edit Gambar Di Blur To Fokus Gallery:

1.Lihat HTML dibawah ini

<div>
<ul>
  <li>
    <img src="http://lorempixel.com/200/200/
abstract"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/city"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/people"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/transport"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/animals"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/food"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/nature"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/business"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/nightlife"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/sports"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/fashion"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/technics"/>
  </li>
  
</ul>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <filter id="blur">
  <feGaussianBlur stdDeviation="5" />
 </filter>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <filter id="noblur">
  <feGaussianBlur stdDeviation="0" />
 </filter>
</svg>

2.Untuk mengganti gambarnya silahkan lihat HTML dibawah ini

<img src="http://lorempixel.com/200/200/
abstract"/>

Ganti saja url lorempixel.com/200/200.... sampai />
3.Gampang bukan? 4.Jika ada pertanyaan,silahkan tanyakan di kolom komentar

DownloadDemoTutorial Pasang Script

Share Ke :