Cara Membuat Efek Hover Keren (CSS 3) pada Gambar
Tutorial Blogger kali ini ingin mengajak Anda untuk mempercantik blog dengan tip dan trik Desain Blog proBlogiz, yaitu cara membuat efek hover pada gambar atau image di postingan blog. Ada banyak cara untuk memberi efek hover pada gambar di postingan blog, salah satunya yaitu efek image dengan CSS3 dan JQuery, namun kali ini proBlogiz menggunakan code CSS 3. Pada artikel 7 Efek Hover CSS 3 Keren pada Gambar ini, Anda juga dapat melihat semua live demo dari contoh aneka efek hover keren pada gambar, seperti Efek hover Transparan, Efek hover zoom, spin, border, transform dan yang lain dibawah ini serta code CSS 3 yang bisa Anda copy dan diletakkan di blog atau template Anda.
Efek gambar atau juga disebut Efek hover, tersebut akan
terlihat ketika mouse didekatkan pada gambar yang bersangkutan atau
diarahkan dengan mouse/pointer pada gambar tersebut, gambar juga dapat
berupa link yang tertuju pada sebuah URL tertentu tetapi bisa juga tanpa
link samasekali.
Penggunaan efek atau hover effect pada gambar/image pada
postingan Anda, selain menambah cantik tampilan blog juga memperbesar
kemungkinan peningkatan pageview blog dikarenakan pengunjung atau
visitor tentu akan lebih betah berlama-lama di blog Anda. Dan
kemungkinan mengunjungi blog Anda kembali lebih terbuka.....ya kenapa
tidak dicoba saja sob!!!!
Berikut Contoh 7 Efek Hover Keren pada Gambar dengan Code CSS 3
Contoh 1
Efek Hover Transparan (CSS Image
Opacity)
note : arah mouse Anda pada gambar untuk lihat hasilnya
Code CSS
.img1:hover { opacity:0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ }
note :ganti opacity 0.3 dan 30 sesuai selera Anda
Untuk Melihat Contoh Efek Hover Yang Lain Klik >>>> Demo LIVE
Contoh 2
Efek Hover Berputar ( 360 degree rotate image )
Contoh 3
Efek Hover Spin and Zoom
note : ganti scale 1.5 sesuai selera
Contoh 5
Efek Hover Efek Transform
Contoh 6
Efek Hover Efek Moving
Contoh 7
Efek Hover Efek Border Transform
note : ganti border sesuai seleraUntuk Melihat Contoh Efek Hover Yang Lain Klik >>>> Demo LIVE
Cara Pasang Efek Hover Pada Blog
Efek Hover ini umunya berjalan dengan baik pada browser Google Chrome
dan Mozilla Firefox (update earlier Browser recomended), sedangkan pada
IE gunakan minimal IE8 atau update earlier.
Untuk menggunakanya efek-efek hover diatas, langkah yang harus dilakukan
yaitu meletakkan salah satu kode CSS diatas yang Anda suka sebelum tag ]]></b:skin> pada template.
log in Bloggerpilih Template >>> Edit HTMLtekan F3 >>> cari kode ]]></b:skin>copy kode CSS diatas yang Anda sukai, pastekan / letakkan tepat sebelum tag ]]></b:skin>
Kemudian Save Template.
Penulisan pada postingan blog >>>> Post Editor Blogger dalam mode HTML, yaitu menggunakan kode HTML berikut :
1. Efek Hover Gambar Tanpa Link
Gunakan kode HTML berikut untuk penulisan efek hover tanpa link :
<img class="img1" src="URL GAMBAR" /></img>
kode tersebut digunakan juga apabila Anda mempunyai lebih dari satu efek hover css pada templatenya
2. Efek Hover disertai Link URL
Gunakan kode HTML berikut :
<a class="img1" href="http://problogiz.blogspot.com"><img border="0" src="URL GAMBAR" /></a>
class="img1" : nama code css hover yang Anda pilih
URL GAMBAR : alamat URL gambar
Gimana sob......mau coba salah satu efek hover diatas?
Mudah bukan cara membuat efek hover keren dengan CSS 3?
Silahkan tanyakan di form komentar kalau bingung sob.....atau mungkin ada cara atau ide yang lebih baik?
Semoga contoh 7 Efek Hover Keren (CSS 3) pada Gambar diatas bisa membantu dan bermanfaat tentunya, jempolnya juga jangan lupa ya...:))
Posting Komentar