Efek Hover Bagus Pada Gambar (Terpopuler)

Efek hover Keren pada gambar (hover terpopuler) - Setelah kemarin kami memposting hover effect pada link dan kini kami kembali lagi memberikan beberapa efek hover kepada anda. Kebiasaan seseorang adalah menambahkan beberapa gambar  pada postingan. Menambahkan gambar pada suatu postingan blog merupakan suatu hal baik untuk membuat postingan terasa lebih hidup dan juga lebih menarik.

Pada gambar juga terdapat banyak sekali efek-efek dan itu mungkin bisa anda gunakan agar postingan terlihat lebih menarik lagi, Sebagai contohnya adalah efek hover. Efek Hover pada suatu gambar dapat diartikan sebagai efek yang akan muncul ketika pointer mous berada di atas gambar.

Efek Hover Pada Gambar

Seperti yang telah saya jelaskan semua, terdapat banyak sekali Efek hover yang bisa diguanakan, namun disini saya akan memberikan beberapa efek hover pada gambar terpopular dan banyak atau sering digunakan. Bagusnya adalah Efek hover dapat dugunakan baik itu Blogger maupun Wordpress.

Blur Image Efek Hover

.post-body img { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { -webkit-filter:blur(5px); }

Keterangan : Pada Efek Blur Image disini nantinya gambar akan diberi efek blur saat atau ketika cursor mouse berada di atasnya.

Grayscale Image Efek Hover

.post-body img {    filter: url("data:image/svg+xml;utf8,<svg
xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */    filter: gray; /* IE6-9 */    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */;}.post-body img:hover {    filter: none;    -webkit-filter: grayscale(0%);}

Keterangan : Grayscal Efek ini memberikan Efek warna abu pada suatu gambar saat cursor berada diatas gambar.

Brighten Image Efek Hover

.post-body img { -webkit-filter:brightness(-65%); -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { -webkit-filter:brightness(0%); }

Keterangan : Brighten ini mengubah gambar menjadi agak gelap sebelum cursor berada diatasnya kemudian saat cursor berada tepat diatasnya maka gambar pada efek ini akan terlihat jelas seperti adanya efek pencahayaan

Morph Image Efek Hover

.post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.post-body img:hover { border-radius:50%; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }

Keterangan : Morph efek memberikan pengubahan pada gambar yang awalhnya persegi atau yang lainnya kemudian akan diubahnya menjadi style lingkaran.

Tilt Image Efek Hover

.post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.post-body img:hover { -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -ms-transform:rotate(-10deg); transform:rotate(-10deg); }

Keterangan : Tilt Efek ini memberikan Efek miring saat cursor mouse berada diatasnya.

Beberapa Efek tersebut adalah Efek Hover terpopular yang digunakan pada gambar oleh siapa saja. Segala sesuatu pasti memiliki cara untuk penggunaannya, Jika anda bingung dalam penggunaannya disini saya juga memberikan cara untuk membantu anda dalam penggunaan efek hover.

Cara Pemasangan Efek Hover Pada Gambar

1. Langkah pertama adalah anda perlu untuk masih ke blogger dasboard

2. Jika sudah Pilih atau Klik pada bagian Template kemudian klik Edit HTML

3. ketiga Cari Kode ]]><b/:skin> atau bisa juga </style> , untuk cara pencarian agar lebih cepat anda bisaa menggunakan CTRL + F atau bisa juga dengan tekan F3.

4. Setelah Kode tersebut ketemu maka langkah selanjutnya adalah anda copy dan pastekan salah satu kode dari efek hover yang anda pilih kemudian pastekan atau tempelkan diatas kode ]]></b:skin> atau kode </style>.
5. Klik Save Template

Setelah anda mengikuti cara diatas anda bisa melihat perubahan yang terjadi pada style efek gambar pada setiap artikel anda. Bagaimana menurut anda dengan tampilan efek tersebut ? Pasti Lebih Cantik bukan ? .