Efek Zooming dan Drop Shadows Gambar

Kali ini saya ingin berbagi lagi, hanya sebuah trik sederhana cara membuat atau menambahkan efek zooming dan drop shadows pada gambar dengan CSS3.
Untuk lebih jelasnya silahkan cek live demonya dulu dengan menekan tombol berikut:

Jika anda tertarik untuk menambahkan efek ini pada blog atau postingan anda, caranya sangat mudah, silahkan ikuti langkah-langkah berikut:

Setelah login ke akun blogger anda
Pada dasbor >> klik Template >> Edit HTML >> Proceed
Cari kode  ]]></b:skin> (Gunakan Ctr + F untuk memudahkan pencarian)
Setelah dapat letakkan kode CSS berikut diatas kode ]]></b:skin>

    .TTB-CSS3 img{
    -webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
    -moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
    -o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
    -o-transition-duration: 0.5s; /*Opera Animation duration*/
    opacity: 0.5;
    margin: 0 10px 5px 0;
    }
    .TTB-CSS3 img:hover{
    -webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
    -moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
    -o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
    box-shadow:0px 0px 30px gray;
    -webkit-box-shadow:0px 0px 30px gray;
    -moz-box-shadow:0px 0px 30px gray;
    opacity: 1;
    }

Simpan template.

Nah sekarang cara menampilkan efek zooming dan drop shadows pada gambar postingan blog anda.

Pada bagian HTM editor posts cukup tambahkan kode berikut:

    <div class="TTB-CSS3">
    <img src="Image URL Disini" />
    </div>

Ganti Image URL Disini dengan URL/ link image yang ingin anda tampilkan pada postingan anda.