Apa kabar kalian semua, semoga kalian semua dalam keadaan sehat walafiat dan banyak rejekinya hehehe. Kali ini saya akan membuat postingan tentang CSS lagi yang coba ane share kali ini. Yaitu Menggunakan CSS Ease-Out untuk membuat semua gambar diblog otomatis membesar bila disentuh cursor. Kalau yang sebelumnya saya juga pernah ngeshare membuat gambar menjadi besar bila dilalui cursor namun tidak otomatis seperti pada postingan kali ini.
Jika artikle gambar pada postingan di blog kalian akan terlihat cantik, kalian bisa memakai CSS ini untuk mempercantik tampilan gambar pada blog kalian. Efek animasi ini sangat ringan untuk loading blog, karena efek animasi ini menggunakan CSS. Jika kalian semua ingin mencobanya kalian semua bisa menerapkan kode di bawah ini pada blog kalian.
<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmsde4IS8ndmea-a_f-_HhA2OOfUEGqVj209sx-r9aPKm66EfgBdWxMRZFy6T-2zdGwAkdx9ddeAZ8z37pWmHCMi363x9uU76Z8B_Z5V5ZaZa-iBetiQrvjZuKGDXABCufN7LmClRXWy_/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.blogcozone.com/">
<span>Three-eyed Robot</span>
</a>
</div>Berikut ini Cara pemasangannya:
- Login ke Blog Sobat
- Taruh kode nya di postingan
- Ganti Url gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmsde4IS8ndmea-a_f-_HhA2OOfUEGqVj209sx-r9aPKm66EfgBdWxMRZFy6T-2zdGwAkdx9ddeAZ8z37pWmHCMi363x9uU76Z8B_Z5V5ZaZa-iBetiQrvjZuKGDXABCufN7LmClRXWy_/s420/seocips-image-hover-effect.png dengan Url gambar sobat
- Ganti link tujuan http://www.blogcozone.com/ dengan link tujuan kalian
- Dan ganti Three-eyed Robot dengan keterangan gambar yang kalian mau
- Setelah itu publikasikan postingan dan lihat hasilnya
Semoga artikel kali ini bisa bermanfaat buat kalian semua