Cara Membuat Gambar Ber-efek Animasi Hover 3D diblog

Posted by IRVAN JAYA on 9:56:00 AM

Cara Membuat Gambar Ber-efek Animasi Hover 3D
Easy Get Media - Cara Membuat Gambar Ber-efek Animasi Hover 3D .

 Kali ini blog Easy Get Media akan share cara membuat gambar ber-efek animasi hover 3d diblog pusing maksudnya gimana lihat gambar dibawah dan arahkan pointer mouse anda pada gambar dan lihat efeknya.



Oke mari kita praktek-kan cara membuat efek-nya
1. Copy kode dibawah ini :
<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.muh-irvan-jaya.blogspot.com/">   <span>Three-eyed Robot</span>  </a> </div>
2. Silahkan ubah  http://2.bp.blogspot.com/-R_QA4y6FvqU/VVYNSby8gGI/AAAAAAAAExI/ORHay_oeR28/s420/seocips-image-hover-effect.png Menjadi URL Gambar Anda .
3. Silahkan ubah http://www.muh-irvan-jaya.blogspot.com/ menjadi URL blog sobat !!
4. Jika telah selesai memodifikasi kode diatas silahkan anda pasang dibagian manapun diblog/situs sobat !!

Terima kasih telah membaca konten Easy Get Media


Nama Anda
New Johny WussUpdated: 9:56:00 AM

0 comments:

Post a Comment

29-04-2016 | Komentar Bebas |

Powered by Blogger.
CB