Cara Membuat Efek Hover Fall Backwards pada Gambar di Blogger! Sekedar Gayaanlah

Animasi Hover

Dengan menambahkan efek hover fall backwards pada gambar adalah salah satu cara mempercantik membuat tampilan blog lebih menarik, efek hover ini akan terlihat jika kursor mouse diarahkan pada gambar yang ada di postingan kamu.

Banyak efek animasi yang bisa kamu gunakan pada blog kamu, misalnya efek hover fall backwards pada gambar. Penggunaan efek hover pada gambar seperti ini memiliki keuntungan tersendiri yaitu, dapat meningkatkan daya tarik visual pada blog. Contohnya kamu bisa kamu lihat gambar di atas, atau untuk lebih jelasnya lagi lihat saja demonya di bawah akhir postingan ini.

Cara Membuat Efek Hover fall backwards di Blogger

Untuk menerapkannya pada postingan blog contohnya adalah kode di bawah ini, diletakan dalam mode Tampilan HTML postingan

Tampilan HTML

Gunakan kode di bawah ini:

<style>
.sepesertmb { width:400px; height:300px; margin:70px auto; perspective:1000px; }
.sepesertmb a { display:block; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsEZxpOOdn7d2QApvSeVn5Piju1xo2SL_4OMT3c50-6Io6_b2JDftDW_PMqKNMvEirnOteGeC-xTF8QccpMdj-Xl_faDDTxM_QR3tnnqjqIjXUSC7n-jpgt1YTEVo13NobfJmHkv7BfZO3/s420/haisob-image-hover-effect.png"); background-size:0,cover; transform-style:preserve-3d; transition:all 0.5s; }
.sepesertmb:hover a { transform:rotateX(80deg); transform-origin:bottom; }
.sepesertmb 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; }
.sepesertmb 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; }
.sepesertmb 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; }
.sepesertmb: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="sepesertmb">
 <!-- Image -->
 <a href="https://www.sepeser.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.

👉 LIHAT DEMO 👈

Bagaimana sobat, menarik bukan? sekian yang dapat dibagikan saat ini selamat mencoba dan semoga bermanfaat.