Efek Gambar Transparan pada Blog


Seperti biasanya pada postiingan-postingan sebelumnya, kali ini saya coba share mengenai efek gambar transparan pada blog. Mungkin cara ini sangatlah mudah dan mungkin juga sangat sederhana karena saya suka dengan yang sederhana. Misal kita ingin menjadikan gambar atau image yang berada pada blog atau postingan menjadi transparan pada saat di hover nah inilah caranya. Hal pertama yang harus dilakukan adalah backup template dulu, karena pengalaman dulu saya lupa membackup template dan akhirnya ancur deh tampilan blog saya. Setelah memback up template lalu hal yang harus dilakukan adalah masuk ke Edit HTML lalu cari kode yang mirip seperti di bawah ini:

a img{border:7px solid #FFFFF;
-webkit-box-shadow:0px 0px 3px #CCCCCC;
-moz-box-shadow:0px 0px 3px #CCCCCC;
-o-box-shadow:0px 0px 3px #CCCCCC;
box-shadow:0px 0px 3px #CCCCCC;
}

atau

img{border:7px solid #FFFFF;
-webkit-box-shadow:0px 0px 3px #CCCCCC;
-moz-box-shadow:0px 0px 3px #CCCCCC;
-o-box-shadow:0px 0px 3px #CCCCCC;
box-shadow:0px 0px 3px #CCCCCC;
}

Biasanya kode gambar yang akan diberi efeknya seperti itu, jika mungkin kode pada template anda berbeda cari saja yang mirip seperti itu.
Kemudian hanya tinggal menyisipkan kode berikut sebelum atau setelah kode tadi:

a img:hover{
opacity:0.5;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}

atau 

img:hover{
opacity:0.5;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}
Lalu simpan template, dengan kode tersebut maka gambar yang ada pada blog akan menjadi transparan pada saat di hover. Pertama tambahan a img:hover artinya gambar akan mempunyai efek saat di hover oleh kursor mouse. Kedua menggunakan opacity:0,5; yang berarti gambar akan menjadi transparan pada saat di hover dengan value 0.5 ini bisa diganti dengan "0.3" atau "0.7" batasnya antara "0" sampai dengan "1", semakin kecil valuenya makan akan semakin transparan. Lalu ketiga menambahkann transisi supaya memberikan efek delay. Untuk demonya silahkan hover gambar yang ada pada postingan ini. Selesai, sangat sederhana dan mudah kan. Semoga artikel ini dapat membantu.

17 komentar:

  1. wah keren nie, jadi lebih cerah ya. seolah menyatu.. ehm, gini toh efek transparant. makasih gan :D

    BalasHapus
  2. wah bagus banget sob tutornya....

    BalasHapus
  3. Manteep nih mas, lanjutkan. Kadang aku butuhin ini kode-kode emang.

    BalasHapus
  4. wahhh ini sering ane gunakan sobat..... tapi seperti lau ane simple aja... tapi punya sobat... lebih beda dengn ane....

    BalasHapus
  5. Wahhhh ..makasi niee sobb tipsnyaa...nambahh ilmu lagi niee

    BalasHapus
  6. Wachhh.. bagus banget gan cahaya dari efek transparannya,, pengen coba neh..
    coba dulu ahh :)

    BalasHapus

Silahkan berkomentar dengan bahasa yang baik sesuai dengan isi artikel :)