Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

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.

Lihat juga Sob : >> 10 Efek Hover Keren pada Teks Link NEW!!
                     >> Efek Hover Gambar dengan CSS Filter New!!

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)

Efek dengan merubah Image Opacity gambar dari 0.1 sampai 1.0

funny-monkey

note : arahkan 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 )

note : ganti rotation degree 360deg sesuai selera


Contoh 3
Efek Hover Spin and Zoom 



note : ganti scale dari 1.2 sampai 1.5 untuk perbesar gambar


Contoh 4
Efek Hover Efek 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 selera


Untuk 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 Blogger
pilih Template >>> Edit HTML
tekan 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...:))


Artikel Terkait Lainnya:
Click here for comments

17 komentar

yes,akhirnya nemuin juga yang saya cari"
makasih mz dah share info nya...
mampir ke gubug saya mz bila berkenan,,^^
tq b4

REPLY

thx mas....ok pasti saya berkunjung ke blog Anda

REPLY

thankss tutorialnyaa.. :)

REPLY

Berguna banget buat buat tugas ane gan ^^

REPLY

Kalau biar semua gambar bisa otomatis terpakai efek ini tanpa harus menyisipkan "class="img1"" gimana ya Mas? :D

Btw thanks banget atas tutnya ya Mas. ;)

REPLY

"class=img" fungsinya untuk memanggil / menerapkan efek hover-nya, (img1,img2....dst), beda efek beda CSS style kan:)
jadi kalau mau menerapkan efek hover berbeda digambar, kode html seperti:
"class=img"," <div class="image">....itu harus digunakan mas:)

REPLY

Wah keren hover nya sob..saya terapkan di blog saya nih! :)

REPLY
Komentar ini telah dihapus oleh administrator blog.

informasi bermanfaat...terima kasih..

REPLY

akan saya coba bang,, mkasih triknya,,

REPLY

Thanks banget masbro tutorialnya.
Sangat bermanfaat :)

REPLY

Zoom gambar yg support IE ada ga gan? butuh nih

REPLY

Untuk IE9 dan earlier udah support transform :
contoh:
-ms-transform: scale(0.5,0.5);

untuk IE versi dibawahnya..belum suport transform, menggunakan syntag yang lebih komplex seperti ini:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.5320888862379554, M12=-1.2855752193730787,
M21=1.2855752193730796, M22=1.5320888862379558);


atau bisa pake jquery , nti saya buatin pembahasan yang lebih detail mengenai transformscale pada IE, ok..

REPLY

wah makasih sob.. nambah pengetahuan banget nih.. mantab jiwa..
Teruskan sob.. ^_^

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|