Cara membuat Efek Animasi Hover 3D pada gambar blog

HaiSob apa kabar? Kamu bisa membuat terkesan pengunjung blog kamu dengan menambahkan efek-efek dan animasi-animasi. 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 Shirk CSS image hover, Tilt CSS image hover effect, dan Grow CSS image hover effect.

Animasi Hover 3D


Membuat Efek Hover 3D pada Gambar Blog
Animasi Hover 3D

Contohnya kamu bisa kamu lihat gambar di atas, atau untuk lebih jelasnya lagi lihat saja demonya di bawah ini.




Cara memasang Efek Hover 3D di Blogger


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>
.haisobtmb { width:400px; height:300px; margin:70px auto; perspective:1000px; }
.haisobtmb 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/haisob-image-hover-effect.png"); background-size:0,cover; transform-style:preserve-3d; transition:all 0.5s; }
.haisobtmb:hover a { transform:rotateX(80deg); transform-origin:bottom; }
.haisobtmb 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; }
.haisobtmb 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; }
.haisobtmb 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; }
.haisobtmb: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="haisobtmb">
 <!-- Image -->
 <a href="http://www.haisob.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.

Sekian sobat, semoga bermanfaat.