Tuesday, July 9, 2013

Membuat efek hover pada gambar dengan CSS3

Kali ini Blog-KrenZ akan membagikan postingan yang berjudul Membuat efek hover pada gambar dengan CSS3 , sebelumnya Blog-KrenZ juga memposting artikel tentang Cara mengatasi Like fanspage yang menggangu saat kita menuju link yang kita tuju , Kembali keperbincangan , Blog-KrenZ melihat Blog dengan efek hover yang keren saat di sentuh , Blog-KrenZ pun lansung penasaran dengan Script yang membuat efek Hover tersebut , Ketika Blog-KrenZ Melihat Scriptnya dengan Cara mengklik kanan , Ketika saat mencari Script Hover tersebut , Blog-KrenZ langsung buka notepade untuk menaro Script tersebut , Nihh Langsung di coba yahh hasil copas scriptnya haha , Script ini di ambil dri Blog yang bernama '' Belajar Komputer Melalui Internet'' ,

1.seperti biasa , login dulu ke blogger
2. lalu pergi ke template > HTML
3 . lalu copy paste HTML sobat terus masukan ke dalam notepad [ untuk berjaga-jaga ]
4. cari kode .post img dan .post img:hover dengan cara menggunakan CTRL+F bila ada kode tersebut replace/ganti dengan kode efek hover yang ada di bawah , tapi bila tidak ada kode seperti di atas, tinggal pastekan di atas kode ]]></b:skin> . nah ini kode-kode efek hover yang sudah Blog-KrenZ rangkum .



1. efek gambar bergoyang
.post img {
box-shadow: 0 3px 6px rgba(0,0,0,.25);
transform: rotate(+2deg);
-o-transform: rotate(+2deg);
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.post img:hover {
box-shadow: 0 3px 6px rgba(0,0,0,.5);
transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
2. efek gambar membesar
.post img {
height:auto;
transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
3. efek gambar berputar
.post img{
transition:all 1.2s ease-out;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}
.post img:hover {
z-index:99;
transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-moz-transform:rotate(360deg) scale(2) translate(1px,-3px);
-webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
Jika Sudah memilih Efek-efek di atas , jangan lupa save template , jika Efek tersebut gagal dan sobat merasa ragu , silakan klik crtl+z untuk merubahnya kebentuk semula , sekian dari postingan saya , selamat mencoba

18 comments:

  1. boleh juga nih tutornya gan, nanti ane coba terapin diblog ane ahh cool

    ReplyDelete
  2. Wiihh... Keren gan...
    izin nyoba di My Blog...

    ReplyDelete
  3. KEren GAn ! cocok untuk Blog Q thanks yahh ,

    ReplyDelete
    Replies
    1. Sama2 Gan , Thanks Juga kunjungannya wkwkw

      Delete
  4. mantap nih efek overnya, izin coba ya, soalnya di blog ane gak ada hovernya :v

    ReplyDelete
  5. Silakan Gan ! Thanks Kunjungannya :)

    ReplyDelete
  6. Mantab Efeknya Bro , Gue Coba Dulu Ya :D

    ReplyDelete
  7. Silakan Gan !!
    Thanks kunjungannya :)

    ReplyDelete
  8. Tipsnya menarik untuk di simak nih..
    Thanks yah.

    ReplyDelete
  9. Adhi : Sama2 Gan ! ..
    Thanks Juga Kunjungannya

    ReplyDelete
  10. Wah keren juuga nih artikelnya, Izin Sedot gan :)

    ReplyDelete
  11. Silakan Gan ! Sedot Sampe Habis yahh ..

    ReplyDelete

↓↓→Thanks for Visiting ←↓↓
Ada aturan-aturan jika berkomentar , di mohon untuk membacanya

-] → Dilarang Spam ,Flod , junk , iklan, sara , sex
-] → menggunakan bahasa yang sopan
-] → dilarang live link pada saat berkomentar
-] → di larang menghina postingan , dan teman yang berkomentar
-] → Blog ini Dofollow

↑↑→Thanks for Visiting←↑↑

Privasi komentar !

↓↓→Thanks for Visiting ←↓↓
Ada aturan-aturan jika berkomentar , di mohon untuk membacanya

-] → Dilarang Spam ,Flod , junk , iklan, sara , sex
-] → menggunakan bahasa yang sopan
-] → dilarang live link pada saat berkomentar
-] → di larang menghina postingan , dan teman yang berkomentar
-] → Blog ini menggunakan sistem Dofollow

↑↑→Thanks for Visiting←↑↑