Demonya
Apa kabar Sobatku semua,,Semoga sobatku Rama, Farixsan, Aby, pokoknya semua dah tanpa terkecuali.. dalam keadaan sehat walafiat & banyak rejekinya hehehe..
Masih 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
Langsung Sobat berikut Langkah2 nya ;
Masih 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
Langsung Sobat berikut Langkah2 nya ;
Kodenya
<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/AVvXsEgEETG8iOsmu8EU8X2q6F3hw4fnIdrvPVOpI9w-VYMp6LA4wBdW_Wt3yuxGiQQDSsaM_LuaeoYKnDLPPw9DJoBzs7YGBxA0t8GmA6J1exXXv3E4S_x75UWWS0LE9IZwM3NidnClCvIcByf3/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://virusyntax.blogspot.com/">
<span>Three-eyed Robot</span>
</a>
</div>
Berikut Cara pemasangannya :.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/AVvXsEgEETG8iOsmu8EU8X2q6F3hw4fnIdrvPVOpI9w-VYMp6LA4wBdW_Wt3yuxGiQQDSsaM_LuaeoYKnDLPPw9DJoBzs7YGBxA0t8GmA6J1exXXv3E4S_x75UWWS0LE9IZwM3NidnClCvIcByf3/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://virusyntax.blogspot.com/">
<span>Three-eyed Robot</span>
</a>
</div>
- Login ke Blog Sobat
- Taruh kode nya di postingan
- Ganti kode yang berwarna Merah dengan gambar sobat
- Ganti kode yang berwarna Biru dengan link tujuan
- Dan yang berwarna Hijau adalah keterangan gambar
- Setelah itu publikasikan postingan dan lihat hasilnya
Semoga bermanfaat
Posting Komentar