Memberi Efek Hover pada Gambar di Header

Add Comment

Hallo all member H-i!
gw bakalan share cara memberi efek hover pada gambar di header
lansung aja ke TKP!

Tutorial:

• Login ke blogger
• Pilih menu template >> edit HTML >> lanjutkan
• Cari Kode ]]></b:skin> Lalu letakkan kode di bawah ini tepat diatasnya

a.thumbopacity img {  -moz-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    -webkit-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;margin-top:5px;margin-left:230px; position:absolute; }
a.thumbopacity:hover img{  margin-left: 175px;  padding-left: 0px;  }

•  Sesuaikan letak Gambar kalian dengan mengedit marginnya 
• Lalu copy kode di bawah ini dan pastekan tepat dibawah code </head>

<a class='thumbopacity'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiib5T5O_R7xro1FncbKD5oVqt2-P95ZBxIurqEmtlDDlJpYhTe_B9DZYxypHlU2loVgK3h4F0puJ-w96ur2BVshzdWdSPu7Wu4n-MNXTGaK9v10QbjuMVmszvcHTI2WDtg0GsZWTLMLc-B/s1600/adada.png'/></a>

• Ubah kode yg berwarna Kuning dengan URL gambar kalian 
• Setelah itu simpan HTML kalian dan lihat hasilnya.... 

Demo
          

Source

NB:KALO MAU COPAZ CANTUMKAN SUMBER!!![H-i]

Anda sedang membaca artikel tentang Memberi Efek Hover pada Gambar di Header dan anda bisa menemukan artikel Memberi Efek Hover pada Gambar di Header ini dengan url http://madara-xcyber.blogspot.com/2013/02/memberi-efek-hover-pada-gambar-di-header.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Memberi Efek Hover pada Gambar di Header ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Memberi Efek Hover pada Gambar di Header sebagai sumbernya.

Ditulis oleh jackahuna - Sabtu, 23 Februari 2013 - 17.47