Cara membuat Morph CSS image hover effect di Blog

HaiSob apa kabar 😀 ? Pada saat ini haisob.com akan berbagi tutorial cara membuat Morph CSS image hover effect. Banyak sekali efek-efek yang bisa kamu tambahkan untuk membuat gambar di postinganmu menjadi lebih menarik, Misalnya dengan menambahkan efek hover gambar seperti Morph image hover efek ini.

Berbicara mengenai efek gambar blog, Sebelumnya juga saya telah membagikan artikel tentang Cara memasang efek lazy load, dan juga membuat efek gambar bergetar dan membuat efek animasi 3D pada gabar blog.

Morph Image Hover Effect


Morph CSS image hover effect
Morph CSS image hover effect


Efek berikut ini kamu tidak perlu menambahkan script jquery, efek ini cukup sederhana yaitu hanya menggunakan CSS. Untuk demonya sobat dapat melihat langsung gambar pada postingan di link di bawah ini (arahkan kursor mouse ke gambar):


Memasang Morph CSS image hover effect di Blogger


1. Di Blog Blogger 😊
2. Pilih menu Template ➔ Edit HTML
Morph CSS image hover effect
Template - Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>
.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); }
4. Save.

Cek gambar di postinganmu apa sesuai harapan atau tidak, jika tidak edit CSS diatas sesuaikan dengan CSS template blog kamu.

Sekian Morph CSS image hover effect semoga bermanfaat.
Join This Site