Membuat efek gambar membesar dengan css3

Kali ini saya akan membahas tentang css3 lagi pada kali ini saya akan membahas cara membuat efek gambar membesar dengan css3 seperti apa modelnya persis seperti gambar di atas modelnya jadi ketika anda meng_Hover atau menyentuh gambarnya maka gambarnya akan menjadi normal kembali sesuai dengan ukurannya itu yang saya maksud membesar.

DEMO

Silahkan lihat demonya dan coba anda sentuh gambar yang ada di postingan tersebut lalu lihat efeknya. persis seperti postingan saya yang Membuat efek opacity pada gambar efeknya akan terlihat saat gambar di sentuh kursor.

1. Simpan kode di bawah ini di atas kode ]]></b:skin>
2. Masukan kode di bawah ini di atas kode tersebut

img.hovergallery {
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    -moz-transition-duration: 800ms;
    -o-transition-duration: 800ms;
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
    margin: 0 10px 5px 0;
    border: 5px solid #27BFE6;
    display: block;
    margin: 0 auto;
    }

img.hovergallery:hover {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1
    }

3. Klik SIMPAN TEMPLATE

Cara penggunaanya

Cara menggunakannya cukup mudah anda tinggal menambah kode html gambar di bawah ini pada Gadget html/javascript.

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

Perhatikan class="hovergallery" setiap anda ingin menggunakan efek ini pada gambar anda, harus menambahkan class="hovergallery" pada kode html gambarnya seperti kode di atas.