Membuat Efek Transformasi Pada Gambar

Membuat Efek Transformasi Pada Gambar - Transformasi ialah perubahan bentuk pada titik suatu bidang pada bidang yang sama. Perubahan pada bidang yang akan dibentuk yaitu pada gambar , untuk membuat dampak transisi pada gambar memakai CSS . Sebagai referensi Anda dapat melihat screnshot dibawah ini :

Pemasanganya cukup gampang kok , apabila Anda tertarik berikut ini langkah-langkah pembuatannya :

1. Masuk keakun Blogger Anda
2. Pilih Template, kemudian klik Edit HTML
3. Untuk memudahkan dalam pencarian gunakan CTRL+F , kemudian Anda cari kode ]]></b:skin>
4. Kemudia Anda salin instruksi dibawah ini dan pasangkan sebelumnya

.imgTransformasi {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.imgTransformasi:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}
.imgTransformasi {
border: 5px solid #fff;
margin: 5px;
}

5. Simpan Template
6. Selanjutnya diharapkan instruksi pemanggil , silahkan Anda salin instruksi dibawah ini , buka Entri baru, kemudian pastekan pada Mode HTML

Kode tanpa Link

<img class="imgTransformasi" src="URL Gambar" height="320" title="Membuat Efek Transformasi Pada Gambar " width="320" />

Kode dengan Link

<a href="URL Tujuan" target="_blank"><img alt=" Transformasi ialah perubahan bentuk pada titik suatu bidang pada bidang yang sama Membuat Efek Transformasi Pada Gambar " border="0" class="imgTransformasi" src=" URL Gambar" height="320" title="Membuat Efek Transformasi Pada Gambar " width="320" /></a>

7. Simpan Template

DEMO [Efek Transformasi]

Mudah bukan, agar bermanfaat!


Sumber http://www.websiteedukasi.com/