0 Comment

Image Hover Contrast - Jika sebelumnya kita telah membahas tentang cara membuat efect hover zoom image dengan css, maka sekarang kita membahas tentang image contrast efect dan tentu nya masih dengan menggunkan css. Apa manfaat image contrast efect pada atikel blogger? manfaat-nya ialah untuk memanjakan para pembaca (pengunjung) dengan hal-hal kecil namun menarik untuk di nikmati.

Contrast efect secara umum dapat diartikan sebagai gradasi,kecerahan, atau nada (warna) antara bidang gelap (shadow) dengan bidang terang. Nah itulah yang akan kita buat sekarang ini dengan menggunakan css. Supaya ada seni dari sebuah gambar yang ditampilkan pada sebuah artikel, ketika gambar di hover atau dilalui oleh mouse maka otomatis gambar akan memancarkan cahaya lebih terang (cahaya yang berwarna).

Cara Menerapkan Css Image Hover Dengan Contarst Efect

Simpan Css Image Hover (Image Contrast) berikut ini kedalam template blog kamu, dan letakkan tepat di atas kode ]]></b:skin>.
.imgscontras1:hover{transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-webkit-filter:contrast(130%);}
Keterangan:
.imgscontras1 merupakan "id" target yang ingin di beri efek contrast (cahaya), id tersebut bisa kamu ganti dengan apa saja asalkan di awali dengan titik dan tidak menggunakan spasi, kemudian
Nilai 150% merupakan level kecerahan atau contrast, semakin besar nilai contras nya akan semakin terang pula efek yang ditampilkan pada gambar, sebaliknya semakin kecil nilai contras nya maka semakin redup efect cahaya "contrast" pada gambar.

Penerapan Tag Image Untuk Memanggil Css Image Contras

Saya telah menyediakan tiga type tag image, kamu tinggal memilih nya saja mana yang cocok buat kamu, dan yang lebih mudah menurut kamu, namun disarankan pilih yang nomer 2 atau nomer 3.
<img class="imgscontras1" src="url_gambar" width="100%"  height="auto"/></img>
<a  class="imgscontras1"   href="url_tujuan"><img  border="0" src="url_gambar" width="100%" height="auto"/></a>
Image (Gambar) disertai link target
<center><a title="Advertisment" href="http://tukanglistrikpulaubatam.blogspot.com"target="_blank"><img class="imgscontras1" alt="Advertisment" src="url_gambar" width="100%" height="auto"/></a></center>
Ganti url_gambar dengan url gambar yang ingin kamu tampilakan
Pada tag image nomer 3 ganti juga ulr blog ini (url_tujuan) dengan url yang kamu targetkan.

Demikian penjelasan dan cara membuat efek cahaya "contrast" pada gambar postingan blog menggunakan Css, kalimat penutup nya masih sama yaitu "semoga bermanfaat dan selamat mencoba" selesai...! Demo nya lihat dan arahkan mouse kamu pada gambar di bawah ini.

Post a Comment Subscribe

Note: Subscribe terlebih dahulu untuk memposting komentar, Kami akan segera kembali untuk meninjau dan menanggapi respon dari anda.

Top