Demonya
Apa kabar Sobatku semua,,Semoga sobatku Rama, Farixsan, Aby, pokoknya semua dah tanpa terkecuali.. dalam keadaan sehat walafiat & banyak rejekinya hehehe..
Masih tentang CSS lagi yang coba ane share kali ini, Yaitu Menggunakan CSS Ease-Out Untuk Membuat Semua Gambar diblog Otomatis Membesar Bila diSentuh Cursor.
Kalau yang sebelumnya saya juga pernah ngeshare Membuat gambar menjadi besar bila dilalui Cursor namun tidak Otomatis seperti pada Postingan kali ini
Langsung Sobat berikut Langkah2 nya ;
Masih tentang CSS lagi yang coba ane share kali ini, Yaitu Menggunakan CSS Ease-Out Untuk Membuat Semua Gambar diblog Otomatis Membesar Bila diSentuh Cursor.
Kalau yang sebelumnya saya juga pernah ngeshare Membuat gambar menjadi besar bila dilalui Cursor namun tidak Otomatis seperti pada Postingan kali ini
Langsung Sobat berikut Langkah2 nya ;
Kodenya
.pic { height:280px; width:280px; overflow:hidden; border:0 solid white; margin-bottom:20px; -webkit-box-shadow:5px 5px 5px #111; box-shadow:5px 5px 5px rgba(0,0,0,0.5); }
.pic:hover { cursor:pointer; }
.morph { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.morph:hover { border-radius:50%; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }
Berikut Cara pemasangannya :.pic:hover { cursor:pointer; }
.morph { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.morph:hover { border-radius:50%; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }
- Login ke Blog Sobat lalu klik template
- Cari ]]></b:skin> dan taruh kode di atas tadi tepat di atas kode ]]></b:skin>
- Dan taruh kode di bawah ini ke dalam postingan
<div class="morph pic">
<a href="Link Tujuan" target="_blank"><img src="Link Gambar" alt="template blog di seocips"/></a>
</div>
Catatan:
Ganti tulisan yang berwarna merah dengan link sobat, dan warna hijau dengan gambar sobat
Ganti tulisan yang berwarna merah dengan link sobat, dan warna hijau dengan gambar sobat
Semoga bermanfaat
Posting Komentar