Membuat Efek Transformasi Pada Gambar

Membuat Efek Transformasi Pada Gambar - Transformasi adalah perubahan bentuk pada titik suatu bidang pada bidang yang sama. Perubahan pada bidang yang akan dibuat yaitu pada gambar , untuk menciptakan efek transisi pada gambar menggunakan CSS . Sebagai contoh Anda bisa melihat screnshot dibawah ini :

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

1. Masuk keakun Blogger Anda
2. Pilih Template, lalu klik Edit HTML
3. Untuk memudahkan dalam pencarian gunakan CTRL+F , lalu Anda cari kode ]]></b:skin>
4. Kemudia Anda salin kode 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 dibutuhkan kode pemanggil , silahkan Anda salin kode dibawah ini , buka Entri baru, lalu pastekan pada Mode HTML

Kode tanpa Link

<img class="imgTransformasi" src="URL Gambar" height="320" title="Bayi Lucu" width="320" />

Kode dengan Link

<a href="URL Tujuan" target="_blank"><img alt="Game" border="0" class="imgTransformasi" src=" URL Gambar" height="320" title="Game" width="320" /></a>

7. Simpan Template

DEMO [Efek Transformasi]

Mudah bukan, semoga bermanfaat!

Subscribe to receive free email updates: