Kamu bisa membuat terkesan pengunjung blog kamu dengan menambahkan efek-efek dan animasi-animasi, ada banyak efek animasi yang bisa kamu gunakan/pasang pada blog kamu, misalnya efek hover 3D pada gambar. Yang dimaksud efek hover disini adalah efek ketika kursor/pointer mouse pengguna di arahkan pada gambar pada postingan Blog.

Berbicara soal efek gambar, sebelumnya juga sudah dibagikan 9 efek hover sederhana pada gambar, 8 efek hover keren pada gambarefek flipping pada gambar dan cara membuat efek zoom kaca pembesar pada gambar di Blog Blogspot.

Berikut ini adalah efek hover yang lain lagi, contohnya kamu bisa kamu lihat gambar di bawah ini, atau untuk lebih jelasnya lagi lihat saja demonya dibawah ini dan jika tertarik ingin membuatnya gunakan saja kode dibawah ini.

Membuat Efek Hover 3D pada Gambar Blog


Cara Membuat Efek Hover 3D Pada Gambar

Berikut ini adalah kodenya yang dapat sobat letakan dalam Mode HTML pada postingan Blog atau bisa juga di letakan pada widget HTML Blog, atau dimasukan pada template blog.
<style>
.seocipstmb { width:400px; height:300px; margin:70px auto; perspective:1000px; }
.seocipstmb a { display:block; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("http://2.bp.blogspot.com/-R_QA4y6FvqU/VVYNSby8gGI/AAAAAAAAExI/ORHay_oeR28/s420/seocips-image-hover-effect.png"); background-size:0,cover; transform-style:preserve-3d; transition:all 0.5s; }
.seocipstmb:hover a { transform:rotateX(80deg); transform-origin:bottom; }
.seocipstmb a:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:36px; background:inherit; background-size:cover,cover; background-position:bottom; transform:rotateX(90deg); transform-origin:bottom; }
.seocipstmb a span { color:white; text-transform:uppercase; position:absolute; top:100%; left:0; width:100%; font:bold 12px/36px Montserrat; text-align:center; transform:rotateX(-89.99deg); transform-origin:top; z-index:1; }
.seocipstmb a:before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); box-shadow:0 0 100px 50px rgba(0,0,0,0.5); transition:all 0.5s; opacity:0.15; transform:rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin:bottom; }
.seocipstmb:hover a:before { opacity:1; box-shadow:0 0 25px 25px rgba(0,0,0,0.5); transform:rotateX(0) translateZ(-60px) scale(0.85); }
</style>
<div class="seocipstmb">
 <!-- Image -->
 <a href="http://www.seocips.com/">
  <span>Three-eyed Robot</span>
 </a>
</div>
Kode berwarna merah diatas adalah link gambar dan kode berwarna biru adalah link tujuan dan warna hijau adalah keterangan gambar, silahkan ganti sesuai keinginan.
2 Komentar untuk "Membuat Efek Animasi Hover 3D Pada Gambar di Blogger"

gan cara buat permalink di bawah postingan + gambar dan ada kolom subscribe nya gimana ya?

lihat demonya kren banget gan, efeknya cukup bagus buat yagn mengelola blog magazine :D