Membuat efek opacity pada gambar dengan css3

Membuat efek opacity pada gambar pasti akan membuat gambar di blog kita beda yah itu menurut saya seperti screenshot di atas efek ini akan terlihat pada saat kita menyentuh gambarnya.

DEMO

Silahkan sentuh gambar pada demo tersebut dan lihatlah apa yang terjadi itulah yang di maksud Efek opacity dengan tambahan efek transisi css3 maka pergerakan efeknya terlihat lebih lembut efek tersebut akan berfungsi jika browser anda support css3 sekarang mari kita bahas cara membuatnya.

1. Baca: Cara masuk ke dalam template
2. Masukan kode di bawah ini di atas kode ]]></b:skin>

.gambar {
    position: relative;
    display: block;
    width: 200px;
    padding: 0;
    margin: 10px auto;
    border: 5px solid #777;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s
    }
.gambar img {
    display: block;
    max-width: 100%;
    border: 0;
    }
.gambar:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    opacity: 0.2;
    }

Cara penggunaanya

1. Untuk cara penggunaannya silahkan anda Tambah Gadget HTML/Javascript terlebih dahulu jika masih bingung baca caranya Disini Nah setelah anda tambahkan Gadget HTML/Javascript silahkan masukan kode di bawah ini di dalamnya.

<img class="gambar" src="Disini URL gambar anda" />

Perhatikan class="gambar" jika anda ingin gambar anda menggunakan efek opacity maka setiap anda menambahkan gambar maka tambahkan kode class="gambar" sesudah tulisan img seperti kode di atas.