Amal membantu Membagikan

Showing posts with label image. Show all posts

Wednesday, October 30, 2013

Membuat Image Efek Hover saat di sentuh CSS Jquery

Sekarang Agan dapat menambahkan Gambar efek hover pada gambar di blogger sangat mudah.

Trik ini memungkinkan gambar Anda ke beberapa transparansi (Tidak semua Gambar saja gambar ditentukan). ketika mouse Agan pada gambar itu akan berubah menjadi tidak transparan akan membuat efek hover.

Watch Live Demo

Caranya, pertama" login Blogger.. Pergi ke Rancangan trus pilih Edit HTML. dan Cari code ]]></b:skin>

Copy CSS di bawah dan taruh sebelum tag ]]></b:skin>

a.thumbopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

dan SAVE TEMPLATE

Sekarang untuk mengaktifkan efek nya
-Apabila code gambar normal akan seperti ini

<a href="http:/blogspot.com/" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhPIJl_Yyh1SPuivJpx5rYazXhemk_UsxJ7FjgImL1Cf_KG7VvkwUDmoYg84yjC_ZLV5l6xX9fzJmqPDe_NP4p3webBGVII-H_L-HDdKYqsk2zAISJcqIxeaUyaelplMjGSsSRE-gcfzH/s1600/2+tooth+peace+sign+paundra+rethouching.jpg" /></a>

-Untuk mengaktifkannya, kita menambahkan code class="thumbopacity" akan seperti ini

<a href="http:/blogspot.com/" class="thumbopacity" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhPIJl_Yyh1SPuivJpx5rYazXhemk_UsxJ7FjgImL1Cf_KG7VvkwUDmoYg84yjC_ZLV5l6xX9fzJmqPDe_NP4p3webBGVII-H_L-HDdKYqsk2zAISJcqIxeaUyaelplMjGSsSRE-gcfzH/s1600/2+tooth+peace+sign+paundra+rethouching.jpg" /></a>

Jangan lupa untuk menambahkan code tersebut, saat kamu akan menerbitkan artikel kamu harus masuk ke mode HTML. Semoga sedikit tips diatas dapat menambah ilmu kawan-kawan blogger semua ^^