Efek Hover Gambar dengan CSS Filter

proBlogiz

---

Efek CSS Filter dan Penerapannya di Web/Blog

Pengertian CSS Filter

Filter bisa dikatakan sarana untuk menerapkan berbagai efek seperti efek pada Photoshop yang diterapkan pada konten HTML dengan sintaks CSS sederhana. Dengan filter properti kita dapat membuat hardware-accelerated efek filter seperti grayscale, blur dan kontras, semua hanya dengan satu baris CSS. Pada artikel ini, kita akan membahas beberapa efek filter CSS yang akan kita terapkan dengan fitur baru ini yang cukup kuat.

Filter awalnya diciptakan sebagai fitur SVG (Scalable Vector Graphics) untuk menerapkan pengolahan efek gambar menjadi vektor grafis. Pada tahun 2008, Robert O'Callahan dari Mozilla berpikir filter memiliki "keterbatasan" karena mereka tidak dapat digunakan untuk meningkatkan konten HTML. Maka sejak saat itu dia mulai bereksperimen dengan cara-cara lain untuk menerapkan efek filter ke konten HTML melalui CSS. Setelah beberapa waktu bersama W3C, dengan bantuan dari Adobe, Apple dan Opera menciptakan spec, yang ditetapkan penerapanya pada browser WebKit pada tahun 2011.

So, bagaimana cara kerja CSS Filter?

Filter dapat diterapkan untuk elemen DOM seperti gambar, teks, bahkan kanvas dan elemen video. Dengan menggunakan parameter yang mengontrol berapa banyak filter diterapkan. Sebelum rendering, filter mengambil snapshot dari halaman ke bentuk bitmap. Kemudian, berdasarkan parameter yang kita berikan, efek akan diterapkan pada halaman aslinya setelah rendering ke dalam dokumen.

Lihat hasil Efek Hover Gambar dengan CSS Filter >>> DEMO LIVE

note : Gunakan browser Chrome untuk melihat efek CSS Filter tersebut

Efek hover dengan CSS filter , yang menjadi pembahasan tutorial kali ini, menggunakan WebKit prefix dimana saat ini CSS3 filter didukung dengan WebKit nightlies. Dengan menerapkan efek hover CSS filter seperti Grayscale, Saturate, Contrast, Brightness, Blur, Invert, Sepia, Hue-rotate, Opacity pada gambar original. 

Berikut sebagian contoh efek-efek CSS filter :

Original image.

Grayscale filtered image.

                          

                      Original

 

sepia(100%)

                           

                        Original

 

saturate(10)

                          

Original

 

hue-rotate(90deg)

                         

Original

 

blur(10px)

                         

Original

 

invert(100%)

Contoh efek pada gambar menggunakan CSS filter diatas sebagaimana dikutip dari www.html5rocks.com

Browser Support Efek CSS Filter

Nah, penerapan Efek CSS Filter pada modern web browser masih menjadi kendala untuk menampilkan efek-efek css filter dengan sempurna. Tidak semua modern Browser mendukung efek css filter ini, hanya yang berbasis Webkit browser, seperti Chrome, Safari 06+ and iOS Safari. So, untuk melihat atau menggunakan efek hover dengan CSS Filter, saat ini salah satu cara terbaik adalah menggunakan web bowser Chrome (Chrome 18+)

Untuk melihat Tabel Kompatibilitas Browser Support Efek CSS Filter Terbaru klik DISINI

Membuat Gallery Album/Gambar dengan  Efek Hover CSS Filter

Sekarang saatnya kita menerapkan Efek Hover CSS Filter yang sangat power ini pada postingan atau widget Blogger. Pertama Anda menyiapkan gambar-gambar yang akan dibuat album (baca juga : Cara Membuat Album), kemudian gantilah URl gambar di markup HTML (yang berwarna merah) dengan url gambar Anda sendiri.

Kode berikut Anda copy dan dapat diimplementasikan pada post editor (HTML mode) sebagai postingan Anda atau ditambahkan sebagai widget blog.

<style>

* { margin: 0; padding: 0;}

body {
 font-family: arial, verdana, tahoma;
 background: url('http://thecodeplayer.com/uploads/media/pxpat.png');
}

#gallery {
 width: 725px;
 margin: 25px auto;
}

#gallery a {
 display: block;
 float: left;
 margin-bottom: 25px;
 position: relative;
 
 -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
 box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}

/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
 margin: 0 25px 25px 25px;
}

#gallery a img {
 display: block;
 -webkit-transition: all 0.5s;
}

/*Hover effects*/
#gallery a img:hover {
 -webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
 -webkit-filter: brightness(0);
}

/*Title styles*/
.title {
 color: #fff;
 font-size: 13px;
 font-weight: bold;
 position: absolute;
 left: 0;
 bottom: 15px;
 z-index: 1;
 padding: 5px 7px;
 background: rgba(0, 0, 0, 0.6);
}

/*Filter styles*/
.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.opacity {-webkit-filter: opacity(50%);}

</style>


<div id="gallery">
 <a href="#">
  <!-- Title and classes -->
  <span class="title">Saturate</span>
  <img src="http://thecodeplayer.com/uploads/media/forest.jpg" class="saturate" />
 </a>
 <a href="#">
  <span class="title">Grayscale</span>
  <img src="http://thecodeplayer.com/uploads/media/lake.jpg" class="grayscale" />
 </a>
 <a href="#">
  <span class="title">Contrast</span>
  <img src="http://thecodeplayer.com/uploads/media/tree.jpg" class="contrast" />
 </a>
 <a href="#">
  <span class="title">Brightness</span>
  <img src="http://thecodeplayer.com/uploads/media/leaves.jpg" class="brightness" />
 </a>
 <a href="#">
  <span class="title">Blur</span>
  <img src="http://thecodeplayer.com/uploads/media/redflower.jpg" class="blur" />
 </a>
 <a href="#">
  <span class="title">Invert</span>
  <img src="http://thecodeplayer.com/uploads/media/zebra.jpg" class="invert" />
 </a>
 <a href="#">
  <span class="title">Sepia</span>
  <img src="http://thecodeplayer.com/uploads/media/tree2.jpg" class="sepia" />
 </a>
 <a href="#">
  <span class="title">Hue-rotate</span>
  <img src="http://thecodeplayer.com/uploads/media/landscape.jpg" class="huerotate" />
 </a>
 <a href="#">
  <span class="title">Opacity</span>
  <img src="http://thecodeplayer.com/uploads/media/mountain.jpg" class="opacity" />
 </a>
</div>

Hasilnya akan nampak seperti DEMO LIVE
note : Gunakan browser Chrome untuk melihat efek CSS Filter tersebut

Untuk menghilangkan background, hapus kode berkut :

body { font-family: arial, verdana, tahoma; background: url('http://thecodeplayer.com/uploads/media/pxpat.png'); }

Efek CSS Filter yang digunakan pada contoh diatas :
saturate {-webkit-filter: saturate(3);}
grayscale {-webkit-filter: grayscale(100%);}
contrast {-webkit-filter: contrast(160%);}
brightness {-webkit-filter: brightness(0.25);}
blur {-webkit-filter: blur(3px);}
invert {-webkit-filter: invert(100%);}
sepia {-webkit-filter: sepia(100%);}
huerotate {-webkit-filter: hue-rotate(180deg);}
opacity {-webkit-filter: opacity(50%);}

So, gimana keren ga efek hover pake CSS Filter ini Sob!!

Memang menggunakan filter sebagai efek menghasilkan efek yang kuat, fitur ini juga yang digunakan untuk render efek-efek di Photoshop. CSS filter hanya contoh lain bagaimana kita seharusnya tidak membatasi diri hanya menggunakan Photoshop untuk membuat desain web. Fitur ini dapat mempermudah desainer dan pengembang web untuk menghilangkan kesenjangan antara desain dan kode.

Enjoy It Now :)