Cara Buat Efek 3D Di Blog Terlengkap [ Tutorial ] ~ Kibow Blog

Cara Buat Efek 3D Di Blog Terlengkap [ Tutorial ] - Di Blogger Ada Yang Namanya Efek Gambar
Bila Anda Mengunjungi Sebuat Blog Orang, Maka Anda Pasti Terdapat Gambar
Dan Bila Courser Anda Di Dekatkan Ke Gambar Tersebut Maka Akan Ada Efek Gambar Yang Bermacam - Macam
Efek Gambar Di Blog Ada Banyak Dan Di Zaman Sekarang, Orang Memodifikasi Efek - Efek Gambar Tersebut Supaya Lebih Menarik Dan Keren, Contohnya Efek Gambar Yang Saya Share Ini,
Ini Adalah Efek Gambar Hover 3D Yang Di Artikelkan Oleh Blog Seocips

Dan Sekarang Saya Akan Memberikan Tutorial Menarik Yaitu Tentang Bagaimana Cara Membuat Efek Hover 3D Di Blog Dengan Mudah Serta Lengkap
Untuk Melihat Bagaimana Efek Gambar Ini Ber'Aksi
Silahkan Anda Lihat Demonya Terlebih Dahulu :

DEMO

Nah Bila Kamu Sudah Lihat Demo Efek Gambarnya Anda Bisa Pasang Di Blog Kamu
Dan Cara Memasangnya Juga Cukup Mudah, Tanpa Utak - Atik Template
Cuma Ngandalkan Html Di Postingan Anda Saja.

Tutorial :

Login Ke Blogger
Klik Entri Baru ( Untuk Membuat Artikel )
Llau Klik HTML Di Post Dan Paste Kode Di Bawah Ini Di HTML Posting

<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://URL.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">
     
     <a href="URL">
      <span>JUDUL</span>
     </a>
    </div>

Keterangan !!
Warna Merah Ganti Dengan URL Gambar Kamu
Dan Warna Pink Ganti Dengan URL Tujuan
Warna Biru Ganti Dengan Judul Gambar

Terima Kasih Atas PERHATIANNYA !!

Kibow Blog

Cara Buat Efek 3D Di Blog Terlengkap [ Tutorial ]

Related Post